ajax 응답 json 문자열과 json 배열 예제(상세 설명)

최근으로서는 일이 많아 밤에 시간을 내어 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 버튼을 클릭한 후의 효과

잘 정리했습니다. 예제는 학습용입니다.

물론, 의문이 있어요. 이전에 콜백 함수에서 응답 데이터를 가져오는 것은 모두 data.responseText를 통해 직접 가져오지만, 오늘의 코드에서는 data.target.responseText를 사용해야 합니다. 왜 그런가요? 알려줄 사람이 있으면 알려주세요. 감사합니다.

이번에 제공하는 이ajax 응답 json 문자열과 json 배열의 예제(상세 설명)는 편집자가 제공한 모든 내용입니다. 이를 통해 참고가 되길 바라며, 많은 지지를 바랍니다. 노래教程.

기본 튜토리얼

좋아하는 것