Esempio dettagliato di risposta AJAX con stringa JSON e array JSON

Negli ultimi tempi sono stato molto impegnato al lavoro, stasera ho trovato il tempo di organizzare lo scenario di ritorno JSON e array JSON nelle richieste AJAX e l'esempio di gestione in primo piano.

Guarda direttamente il codice.

risposta dietro le quinte della stringa 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;
 @Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp)
  throws ServletException, IOException {
 // Costruzione oggetto json
 String resStr = "{" + "name:" + "\"zhangsan\"," + "id:" + "\"id001\"" + "}";
 // Esportare l'oggetto JSON in primo piano
 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);
 }
}

risposta dietro le quinte dell'array 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;
 @Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp)
  throws ServletException, IOException {
 // Costruzione oggetto json
 String resStr1 = "{" + "name:" + "\"zhangsan\"," + "id:" + "\"id001\"" + "}";
 String resStr2 = "{" + "name:" + "\"lisi\"," + "id:" + "\"id002\"" + "}";
 String resStr3 = "{" + "name:" + "\"wangwu\"," + "id:" + "\"id003\"" + "}";
 // Costruzione array json
 String jsonArr = "[" + resStr1 + "," + resStr2 + "," + resStr3 + "]";
 // Output array json al front-end
 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);
 }
}

Pagina in anteprima

<%@ 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字符串转换为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) {
  // Converti la stringa JSON in array JSON
  var obj = eval("(" + data.target.responseText + ")");
  // Crea un frammento di documento, utilizzato per memorizzare le righe del tavolo
  var oFragment = document.createDocumentFragment();
  // Genera righe di dati in base alla lunghezza dell'array 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);
  }
  // Aggiungi le righe di dati nella parte tBody del tavolo
  document.getElementById("tb").appendChild(oFragment);
  }
 };
 xhr.send(null);
 }
</script>
</html>

Immagine della pagina

Effetto dopo aver cliccato sui pulsanti JsonStr e JsonArr

Bene, ordinato, l'esempio è solo per imparare.

Eh, c'è un dubbio. Prima, quando si ottengono i dati di risposta nelle funzioni di callback, si otteneva direttamente con data.responseText. Perché oggi il codice deve utilizzare data.target.responseText? Chi sa dirmi? Gli amici che sanno, per favore ditemelo, grazie infinite.

Questa guida dettagliata sull'esempio di risposta JSON stringa e array JSON (esplicativa) è tutto ciò che ho condiviso con voi. Spero che sia utile come riferimento e vi prego di supportare Tutorial URL con più entusiasmo.

Guida di base