最近上班太忙，晚上抽空整理一下ajax请求中，后台返回json字符串和json数组的场景，以及前台的处理示例。
直接看代码。
json字符串的后台响应
package com.ajax;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;@WebServlet("/jsonStr")public class JsonStr extends HttpServlet {/** * */private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {// 构造json对象String resStr = "{" + "name:" + "\&;zhangsan\&;," + "id:" + "\&;id001\&;" + "}";// 输出json对象到前台PrintWriter out = resp.getWriter();out.write(resStr);out.flush();out.close();}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {doGet(req, resp);}}
json数组的后台响应
package com.ajax;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;@WebServlet("/jsonArr")public class JsonArr extends HttpServlet {/** * */private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {// 构造json对象String resStr1 = "{" + "name:" + "\&;zhangsan\&;," + "id:" + "\&;id001\&;" + "}";String resStr2 = "{" + "name:" + "\&;lisi\&;," + "id:" + "\&;id002\&;" + "}";String resStr3 = "{" + "name:" + "\&;wangwu\&;," + "id:" + "\&;id003\&;" + "}";// 构造json数组String jsonArr = "[" + resStr1 + "," + resStr2 + "," + resStr3 + "]";// 输出json数组到前台PrintWriter out = resp.getWriter();out.write(jsonArr);out.flush();out.close();}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {doGet(req, resp);}}
前台页面
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Json</title></head><body><br><br><input type="button" value="JsonStr" onclick="jsonStr()" /><br><br><table><tr><td>username</td><td><input id="username"></td></tr><tr><td>id</td><td><input id="id"></td></tr></table><br><br><br><input type="button" value="JsonArr" onclick="jsonArr()" /><br><br><table border="1" bordercolor="red"><caption>Json Array</caption><thead><tr><th>Username</th><th>Id</th></tr></thead><tbody id="tb"></tbody></table></body><script type="text/javascript">// json字符串处理方法function jsonStr() {var xhr = new XMLHttpRequest();xhr.open("get", "jsonStr");xhr.onreadystatechange = function(data) {if (xhr.readyState == 4 && xhr.status == 200) {// 将json字符串转换为json对象var obj = eval("(" + data.target.responseText + ")");document.getElementById("username").value = obj.name;document.getElementById("id").value = obj.id;}};xhr.send(null);}// json数组处理方法function jsonArr() {var xhr = new XMLHttpRequest();xhr.open("get", "jsonArr");xhr.onreadystatechange = function(data) {if (xhr.readyState == 4 && xhr.status == 200) {// 将json字符串转换为json数组var obj = eval("(" + data.target.responseText + ")");// 创建代码片段，用于存放表格行var oFragment = document.createDocumentFragment();// 根据json数组长度，产生行数据for (var i=0; i<obj.length; i++) {var trObj = document.createElement("tr");trObj.innerHTML = "<td>" + obj[i].name + "</td><td>" + obj[i].id + "</td>";oFragment.appendChild(trObj);}// 将行数据添加在表格的tBody部分document.getElementById("tb").appendChild(oFragment);}};xhr.send(null);}</script></html>
页面效果图
人生就像是一场旅行，遇到的既有感人的，
