json 문자열 및 json 배열에 대한 ajax 응답의 예(그래픽 튜토리얼)-JS 튜토리얼-php.cn

json 문자열 및 json 배열에 대한 ajax 응답의 예(그래픽 튜토리얼)

亚连

풀어 주다： 2018-05-22 17:18:10

원래의

2078명이 탐색했습니다.

이제 json 문자열과 json 배열에 대한 ajax 응답의 예를 보여드리겠습니다. 이제 그것을 여러분과 공유하고 모든 사람에게 참고 자료로 제공하겠습니다.

요즘 회사 일이 너무 바빠서 저녁에 시간을 내어 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;

 @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);
 }
}

로그인 후 복사

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);
 }
}

로그인 후 복사

프런트 페이지

<%@ 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>

로그인 후 복사

페이지 렌더링

JsonStr 및 JsonArr 버튼 클릭 후 효과

위에 I 모든 사람을 위해 정리했습니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.