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