집 > 기사 > 웹 프론트엔드 > ajax는 json을 사용하여 데이터 전송을 실현합니다.

ajax는 json을 사용하여 데이터 전송을 실현합니다.

亚连원래의: 2018-05-22 16:31:252651검색

이 기사에서는 json을 사용하여 데이터 전송을 구현하는 ajax 방법을 주로 소개하며 이는 좋은 참고 가치를 가지고 있습니다. 함께 살펴볼까요

JSON(JavaScript Object Notation)은 가벼운 데이터 교환 형식입니다. ECMAScript의 하위 집합을 기반으로 합니다. JSON은 완전히 언어 독립적인 텍스트 형식을 사용하지만 C 언어 계열(C, C++, C#, Java, JavaScript, Perl, Python 등 포함)과 유사한 규칙도 사용합니다. 이러한 속성은 JSON을 이상적인 데이터 교환 언어로 만듭니다. 사람이 읽고 쓰기가 쉽고, 기계가 구문 분석하고 생성하기도 쉽습니다(일반적으로 네트워크 전송 속도를 높이는 데 사용됨).

Json은 단순히 JavaScript에서 객체와 배열을 의미하므로 이 두 구조는 이 두 구조를 통해 다양하고 복잡한 구조를 표현할 수 있습니다.

1. 객체: 객체는 "{}"로 묶인 내용으로 js로 표현되며, 데이터 구조는 {key: value, key: value,...}의 키-값 쌍 구조입니다. 객체 지향 언어에서 key는 객체의 속성이고 value는 해당 속성 값이므로 이해하기 쉽습니다. 속성 값을 얻는 값 방법은 object.key입니다. , 문자열, 배열 및 개체.

2. 배열: js의 배열은 대괄호 "[]"로 묶인 내용입니다. 데이터 구조는 ["java", "javascript", "vb",...]이며 값 방법은 동일합니다. 모든 언어에서와 마찬가지로 인덱스 획득을 사용하면 필드 값 유형은 숫자, 문자열, 배열 또는 개체가 될 수 있습니다.

복잡한 데이터 구조도 객체와 배열이라는 두 가지 구조를 통해 결합할 수 있습니다.

JSON을 사용하기 전에 json.jar 패키지를 가져와야 합니다

단일 개체 전송:

새 서블릿 만들기

package com.itnba.maya.a;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONObject;
/**
 * Servlet implementation class C
 */
@WebServlet("/C")
public class C extends HttpServlet {
 private static final long serialVersionUID = 1L;
 /**
  * @see HttpServlet#HttpServlet()
  */
 public C() {
  super();
  // TODO Auto-generated constructor stub
 }
 /**
  * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
  */
 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  request.setCharacterEncoding("utf-8");
  response.setCharacterEncoding("utf-8");
  //模拟从数据库中查处
  Dog a=new Dog();
  a.setName("小黄");
  a.setAge(5);
  a.setZl("哈士奇");
  JSONObject obj=new JSONObject();
  obj.put("name", a.getName());
  obj.put("age", a.getAge());
  obj.put("zl", a.getZl());
  JSONObject bb=new JSONObject();
  bb.put("obj", obj);
  response.getWriter().append(bb.toString());
 }
 /**
  * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
  */
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // TODO Auto-generated method stub
  doGet(request, response);
 }
}

효과는 다음과 같습니다.

j sp 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>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#k").click(function(){
  $.ajax({
   url:"C",
   data:{},
   type:"POST",
   dataType:"JSON",
   success:function(httpdata){
    $("#x").append("<li>"+httpdata.obj.name+"</li>");
    $("#x").append("<li>"+httpdata.obj.age+"</li>");
    $("#x").append("<li>"+httpdata.obj.zl+"</li>")
   }
  })
 });
});
</script>
</head>
<body>
<span id="k">查看</span>
<h1>
<ul id="x">
</ul></h1>
</body>
</html>

효과는 다음과 같습니다:

컬렉션 또는 배열 전송:

servlet:

package com.itnba.maya.a;
import java.io.IOException;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;
import org.json.JSONObject;
/**
 * Servlet implementation class D
 */
@WebServlet("/D")
public class D extends HttpServlet {
 private static final long serialVersionUID = 1L;

 /**
  * @see HttpServlet#HttpServlet()
  */
 public D() {
  super();
  // TODO Auto-generated constructor stub
 }
 /**
  * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
  */
 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  request.setCharacterEncoding("utf-8");
  response.setCharacterEncoding("utf-8");
  //模拟从数据库中查出
  Dog a1=new Dog();
  a1.setName("小黄");
  a1.setAge(5);
  a1.setZl("哈士奇");
  Dog a2=new Dog();
  a2.setName("中黄");
  a2.setAge(6);
  a2.setZl("泰迪");
  Dog a3=new Dog();
  a3.setName("大黄");
  a3.setAge(7);
  a3.setZl("京巴");
  ArrayList<Dog> list=new ArrayList<Dog>();
  list.add(a1);
  list.add(a2);
  list.add(a3);
  JSONArray arr= new JSONArray();
  //遍历集合
  for(Dog d:list){
   JSONObject obj=new JSONObject();
   obj.put("name", d.getName());
   obj.put("age", d.getAge());
   obj.put("zl", d.getZl());
   arr.put(obj);
  }
  response.getWriter().append(arr.toString());
 }
 /**
  * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
  */
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // TODO Auto-generated method stub
  doGet(request, response);
 }
}

효과 다음과 같습니다:

jsp 페이지:

<%@ 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>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#k").click(function(){
  $.ajax({
   url:"D",
   data:{},
   type:"POST",
   dataType:"JSON",
   success:function(httpdata){
    for(var i=0;i<httpdata.length;i++){
     var n=httpdata[i].name
     var a=httpdata[i].age
     var z=httpdata[i].zl
     var tr="<tr>"
      tr+="<td>"+n+"</td>"
      tr+="<td>"+a+"</td>"
      tr+="<td>"+z+"</td>"
      tr+="</tr>"
      $("#x").append(tr)
    } 
   }
  })
 });
});
</script>
</head>
<body>
<span id="k">查看</span>
<h1>
<table width="100%" id="x" border="1px">
</table>
</h1>
</body>
</html>

효과는 다음과 같습니다.

위 내용은 앞으로 모두에게 도움이 되기를 바랍니다.

ajax는 json을 사용하여 데이터 전송을 실현합니다.

관련 기사