最近上班太忙，晚上抽空整理一下ajax請(qǐng)求中，后臺(tái)返回json字符串和json數(shù)組的場(chǎng)景，以及前臺(tái)的處理示例。
直接看代碼。
json字符串的后臺(tái)響應(yīng)
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;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// 構(gòu)造json對(duì)象
String resStr = "{" + "name:" + "\"zhangsan\"," + "id:" + "\"id001\"" + "}";
// 輸出json對(duì)象到前臺(tái)
PrintWriter out = resp.getWriter();
out.write(resStr);
out.flush();
out.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doGet(req, resp);
}
}
json數(shù)組的后臺(tái)響應(yīng)
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;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// 構(gòu)造json對(duì)象
String resStr1 = "{" + "name:" + "\"zhangsan\"," + "id:" + "\"id001\"" + "}";
String resStr2 = "{" + "name:" + "\"lisi\"," + "id:" + "\"id002\"" + "}";
String resStr3 = "{" + "name:" + "\"wangwu\"," + "id:" + "\"id003\"" + "}";
// 構(gòu)造json數(shù)組
String jsonArr = "[" + resStr1 + "," + resStr2 + "," + resStr3 + "]";
// 輸出json數(shù)組到前臺(tái)
PrintWriter out = resp.getWriter();
out.write(jsonArr);
out.flush();
out.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doGet(req, resp);
}
}
前臺(tái)頁(yè)面
%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
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字符串轉(zhuǎn)換為json對(duì)象
var obj = eval("(" + data.target.responseText + ")");
document.getElementById("username").value = obj.name;
document.getElementById("id").value = obj.id;
}
};
xhr.send(null);
}
// json數(shù)組處理方法
function jsonArr() {
var xhr = new XMLHttpRequest();
xhr.open("get", "jsonArr");
xhr.onreadystatechange = function(data) {
if (xhr.readyState == 4 xhr.status == 200) {
// 將json字符串轉(zhuǎn)換為json數(shù)組
var obj = eval("(" + data.target.responseText + ")");
// 創(chuàng)建代碼片段，用于存放表格行
var oFragment = document.createDocumentFragment();
// 根據(jù)json數(shù)組長(zhǎng)度，產(chǎn)生行數(shù)據(jù)
for (var i=0; iobj.length; i++) {
var trObj = document.createElement("tr");
trObj.innerHTML = "td>" + obj[i].name + "/td>td>" + obj[i].id + "/td>";
oFragment.appendChild(trObj);
}
// 將行數(shù)據(jù)添加在表格的tBody部分
document.getElementById("tb").appendChild(oFragment);
}
};
xhr.send(null);
}
/script>
/html>
頁(yè)面效果圖
點(diǎn)擊 JsonStr 和 JsonArr 按鈕后的效果
好了，整理完畢，示例僅供學(xué)習(xí)。
對(duì)了，有一點(diǎn)疑惑，之前回調(diào)函數(shù)中，獲取響應(yīng)數(shù)據(jù)的時(shí)候，都是直接通過data.responseText 來獲取的，今天的代碼中必須使用data.target.responseText，不知道為什么？有知道的朋友煩請(qǐng)告知一聲，非常感謝。
以上這篇ajax響應(yīng)json字符串和json數(shù)組的實(shí)例(詳解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:- Node.js如何響應(yīng)Ajax的POST請(qǐng)求并且保存為JSON文件詳解
- Ajax 接收服務(wù)器返回的json響應(yīng)方法
- 原生JS實(shí)現(xiàn)Ajax跨域請(qǐng)求flask響應(yīng)內(nèi)容
- Js中使用hasOwnProperty方法檢索ajax響應(yīng)對(duì)象的例子
- 原生javascript的ajax請(qǐng)求及后臺(tái)PHP響應(yīng)操作示例
- 在AngularJs中設(shè)置請(qǐng)求頭信息(headers)的方法及不同方法的比較
- selenium設(shè)置proxy、headers的方法(phantomjs、Chrome、Firefox)
- node.js中的http.response.getHeader方法使用說明
- node.js中的http.response.setHeader方法使用說明
- node.js中的http.response.removeHeader方法使用說明
- js 使用ajax設(shè)置和獲取自定義header信息的方法小結(jié)
