1. 程式人生 > >js_ajax簡單例子_基於json的實現

js_ajax簡單例子_基於json的實現

@WebServlet("/ajax.do")
public class HelloAjax extends HttpServlet {
	private static final long serialVersionUID = 1L;
    private static Map<Integer, List<Person>> personMap=null;
    /**
     * @see HttpServlet#HttpServlet()
     */
    public HelloAjax() {
        super();
        // TODO Auto-generated constructor stub
        personMap=new HashMap<>();
        List<Person> ps=new ArrayList<>();
        ps.add(new Person(1, "1xm1", "男", 150.8));
        ps.add(new Person(2, "1xm2", "男", 150.9));
        ps.add(new Person(3, "1xm3", "男", 160.8));
        ps.add(new Person(4, "1xm4", "男", 170.8));
        personMap.put(1, ps);
        
        ps=new ArrayList<>();
        ps.add(new Person(1, "2xm1", "男", 250.8));
        ps.add(new Person(2, "2xm2", "男", 250.9));
        ps.add(new Person(3, "2xm3", "男", 260.8));
        ps.add(new Person(4, "2xm4", "男",270.8));
        personMap.put(2, ps);
        
        ps=new ArrayList<>();
        ps.add(new Person(1, "3xm1", "男", 350.8));
        ps.add(new Person(2, "3xm2", "男", 350.9));
        ps.add(new Person(3, "3xm3", "男", 360.8));
        ps.add(new Person(4, "3xm4", "男", 370.8));
        personMap.put(3, ps);
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setContentType("text/html;charset=utf-8");
		int depid=Integer.parseInt(request.getParameter("dep"));
		List<Person> ps=personMap.get(depid);
		StringBuffer xml=new StringBuffer();
		xml.append("[");
		int index=0;
		for(Person p:ps) {
			if(index==0) {
				xml.append("{");
			}else {
				xml.append(",{");
			}
			index++;
			xml.append("id:").append(p.getId()).append(",");
			xml.append("name:\"").append(p.getName()).append("\",");
			xml.append("sex:\"").append(p.getSex()).append("\",");
			xml.append("salary:\"").append(p.getSalary()).append("\"");
			xml.append("}");
		}
		xml.append("]");
	    response.getWriter().write(xml.toString());
	}

}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=init;
function init(){
	var deps=document.getElementById("dep");
    deps.onchange=getdata;
}
function getdata(){
	var value=this.value;
	var xtr;
	if (window.XMLHttpRequest) 
	  {// code for IE7+, Firefox, Chrome, Opera, Safari 
		xtr=new XMLHttpRequest(); 
	  } 
	else 
	  {// code for IE6, IE5 
		xtr=new ActiveXObject("Microsoft.XMLHTTP"); 
	  }
	xtr.open("post","ajax.do",true);
	xtr.onreadystatechange=function(){
		if(xtr.readyState==4&&xtr.status==200){
			var jsonDoc=xtr.responseText;
			var ps=eval(jsonDoc);
			var str="";
			for(var i=0;i<ps.length;i++){
				str+=ps[i].id+"----"+ps[i].name+"----"+ps[i].sex+"----"+ps[i].salary+"<br>";
			}
			document.getElementById("display").innerHTML=str; 
		}
	}
	xtr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
	xtr.send("dep="+value);
	
	
}
</script>
</head>
<body>
<input type="button" id="btn" value="測試">
<select id="dep">
<option value="1">技術部1</option>
<option value="2">技術部2</option>
<option value="3">技術部3</option>
</select>
<div id="display"></div>
</body>
</html>

注意:(1).使用json,需要設定“text/html;charset=utf-8”

(2).json格式 [{,},{,}],在引號內若想再引入引號,需要用\"

(3).responseText返回的是json字串,若想變為物件陣列,需要使用eval()

相關推薦

js_ajax簡單例子_基於json實現

@WebServlet("/ajax.do") public class HelloAjax extends HttpServlet { private static final long serialVersionUID = 1L; private static

資料結構實現 5.1:對映_基於實現(C++版)

資料結構實現 5.1:對映_基於樹實現(C++版) 1. 概念及基本框架 2. 基本操作程式實現 2.1 增加操作 2.2 刪除操作 2.3 修改操作 2.4 查詢操作 2.5 其他操作 3. 演算法複

JFreeChart簡單例子_建立柱狀圖(當遇到中文亂碼時,將各個部分的字型分別設定一下就行了)

      public static JFreeChart getChart(CategoryDataset dataset)     {         //此標題  ‘某社團各部門 ’將被後面的chart.setTitle的標題  ‘某社團各部門柱狀圖’ 覆蓋         JFreeChart ch

Java資料介面編寫簡單例子,Java Json解析,服務端介面輸出Json資料,客戶端通過HTTP獲取介面Json資料

實現效果 實現原因 目前主流的CS結構,資料都是通過RESTful風格介面形式呈現,不管是桌面級應用程式還是手機端,介面是我們獲取資料的大多數選擇,主流資料介面呈現形式主要是Json和Xml,後者目前基本漸行漸遠。Json的輕量級和可讀型成為了大多數公司及個人

Cassandra_教程一_Cassandra的簡單操作_基於(cassandra-cli) 需要 2.2 及以下版本

本文基於Cassandra2.1.15,    Cassandra2.1.15  是擁有cassandra-cli 元件的最後一個版本。從 2.2開始 cassandra-cli元件就被移除了。

基於json數據格式實現簡單數據庫——jsonDB

codec fun msl 定義 target insert break html dbn 已在github上建立項目:https://github.com/ThinkerCodeChina/jsonDB/** +-------------------------

基於 django 實現的 webssh 簡單例子

exce attr index tar sum thread 命名 ssh 項目 說明 新建一個 django 程序,本文為 chain。 以下僅為簡單例子,實際應用 可根據自己平臺情況 進行修改。 打開首頁後,需要輸入1,後臺去登錄主機,然後返回登錄結果。 正常項目 可

jQuery基於json與cookie實現購物車的方法

構造 exp als com else cookies 一個 可選參數 int /** * 添加商品及數量到購物車cookie中,返回當前商品在cookie中的總數 */ function AddToShoppingCar(id, num, t

(原創)Maven+Spring+CXF+Tomcat7 簡單例子實現webservice

produces per back targe xsd lean listener ans 控制 這個例子需要建三個Maven項目,其中一個為父項目,另外兩個為子項目 首先,建立父項目testParent,選擇quickstart: 輸入項目名稱和模塊名稱,然後創建:

AutoConf自動生成Makefile(基於helloworld簡單例子

programs tom change col -a 二進制 自己 int 生成 新建一個簡單的helloworld工程文件夾,目錄結構如下 hello.h代碼: #include<stdio.h> void fprint() { printf("h

用socket.io實現websocket的一個簡單例子

soc .html www sock 在線 ket log html 簡單例子 http://biyeah.iteye.com/blog/1295196 socket.io的介紹 http://www.cnblogs.com/mazg/p/5467960.html

一個簡單的ajax獲取json例子

options pid htm inf query class turn setting lists 一、第一個 html: <div id="ruleList"></div>向div裏添加一段循環輸出的數據 js: $.ajax({

騰訊雲數據庫團隊:MySQL5.7 JSON實現簡單介紹

literal 白色 一定的 round tween extra inf features 操作性 作者介紹:吳雙橋 騰訊雲project師 閱讀原文。很多其它技術幹貨。請訪問fromSource=gwzcw.57435.57435.57

Netty實現客戶端和服務端通信簡單例子

啟動服務 ali tty 過程 等等 服務器初始化 讀寫操作 extends ask Netty是建立在NIO基礎之上,Netty在NIO之上又提供了更高層次的抽象。 在Netty裏面,Accept連接可以使用單獨的線程池去處理,讀寫操作又是另外的線程池來處理。 Accep

Python tkinter 實現簡單登陸註冊 基於B/S三層體系結構,實現用戶身份驗證

cte cursor 實現簡單 結果 pass 分享圖片 not null for 技術 Python tkinter 實現簡單登陸註冊 最終效果 開始界面 ? 註冊 登陸 ? 源碼 login.py # encoding=utf-8 f

使用java實現快速排序的一個簡單例子

fast val rgs 快速 實現 個數 static void sta public static void main(String[] args) { // 測試排序 Random r = new Random(); int arr[] = new

基於jrtplib實現的最簡單服務端和客戶端

使用Jrtplib庫實現服務端和客戶端通訊 程式碼都是直接從jrtplib自帶例子中摳出來的,就是為了方便研究,話不多說直接上菜 服務端程式碼: /* Here's a small IPv4 example for receiver */ /* #incl

【原始碼剖析】threadpool —— 基於 pthread 實現簡單執行緒池

部落格新地址:https://github.com/AngryHacker/articles/issues/1#issue-369867252 執行緒池介紹 執行緒池可以說是專案中經常會用到的元件,在這裡假設讀者都有一定的多執行緒基礎,如果沒有的話不妨在這裡進行了解:POSIX

基於 Echarts實現簡單網路拓撲

option = { title: { text: '簡單網路拓撲' }, tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdate: 'quintic

基於Android簡單備忘錄的設計與實現(附git原始碼連結)

前言 課程作業需要,於是忙活兩天寫了一個簡單的備忘錄,使用了ListView,SQLite。 開發環境:Android Studio 原始碼連結:https://gitee.com/zg0212/Memoire 功能截圖 主頁面 新建頁面