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

阿新 • • 發佈：2019-01-13

@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 功能截圖主頁面新建頁面

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

相關推薦