Exemples de réponse ajax aux chaînes json et aux tableaux json (tutoriel graphique)-js tutoriel-php.cn

Exemples de réponse ajax aux chaînes json et aux tableaux json (tutoriel graphique)

亚连

Libérer： 2018-05-22 17:18:10

original

1974 Les gens l'ont consulté

Maintenant, je vais vous présenter un exemple de réponse ajax à une chaîne json et un tableau json. Permettez-moi de le partager avec vous maintenant et de le donner comme référence pour tout le monde.

J'ai été trop occupé au travail récemment, j'ai donc pris du temps le soir pour trier les scénarios dans lesquels les chaînes json et les tableaux json sont renvoyés en arrière-plan lors des requêtes ajax, ainsi que pour traiter des exemples dans la réception.

Regardez directement le code.

Réponse backend de la chaîne 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 {
 // 构造json对象
 String resStr = "{" + "name:" + "\"zhangsan\"," + "id:" + "\"id001\"" + "}";
 
 // 输出json对象到前台
 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);
 }
}

Copier après la connexion

Réponse en arrière-plan du tableau 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 {
 // 构造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();
 }

 @Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp)
  throws ServletException, IOException {
 doGet(req, resp);
 }
}

Copier après la connexion

Page d'accueil

<%@ 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) {
  // 将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>

Copier après la connexion

Rendu de page