Ejemplo de respuesta de AJAX de cadena de JSON y matriz de JSON (explicación detallada)

Recientemente, el trabajo ha sido muy ocupado, por lo que he aprovechado la noche para organizar el escenario de devolución de cadenas JSON y arrays JSON en las solicitudes AJAX de backend, así como los ejemplos de procesamiento en la interfaz de usuario.

Vea el código directamente.

respuesta de backend en cadena 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 {
 // construct json object
 String resStr = "{" + "name:" + "\"zhangsan\"," + "id:" + "\"id001"" + "]";
 // Escribir el objeto JSON en la interfaz de usuario
 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);
 }
}

back-end response of json array

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 {
 // construct json object
 String resStr1 = "{" + "name:" + "\"zhangsan\"," + "id:" + "\"id001"" + "]";
 String resStr2 = "{" + "name:" + "\"lisi\"," + "id:" + "\"id002"" + "]";
 String resStr3 = "{" + "name:" + "\"wangwu\"," + "id:" + "\"id003"" + "]";
 // construct json array
 String jsonArr = "[" + resStr1 + "," + resStr2 + "," + resStr3 + "]";
 // output json array to 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);
 }
}

front-end page

<%@ 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) {
  // Convertir la cadena JSON en un array JSON
  var obj = eval("(" + data.target.responseText + )");
  // Crear un fragmento de código, utilizado para almacenar las filas de la tabla
  var oFragment = document.createDocumentFragment();
  // Generar los datos de fila según la longitud del 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);
  }
  // Agregar los datos de fila en la parte tBody de la tabla
  document.getElementById("tb").appendChild(oFragment);
  }
 };
 xhr.send(null);
 }
</script>
</html>

Diagrama de página

El efecto después de hacer clic en los botones JsonStr y JsonArr

Bueno, se ha organizado, el ejemplo es solo para el aprendizaje.

Por cierto, tengo una duda, anteriormente al obtener los datos de respuesta en la función de callback, siempre se obtenía directamente a través de data.responseText, ¿por qué en el código de hoy se debe usar data.target.responseText? ¿Alguien sabe por qué? Por favor, diganme, muy agradecido.

La instancia de respuesta JSON de AJAX y el array JSON que se muestra a continuación es todo lo que el editor comparte con ustedes, espero que les sirva de referencia y que apoyen más a la guía de tutorial.

Tutoriales básicos

Te gustará