ajax uses json to realize data transmission-JS Tutorial-php.cn

ajax uses json to realize data transmission

亚连

Release： 2018-05-22 16:31:25

Original

2654 people have browsed it

This article mainly introduces the method of ajax using json to realize data transmission, which has a good reference value. Let’s take a look at it together

JSON (JavaScript Object Notation) is a lightweight data exchange format. It is based on a subset of ECMAScript. JSON uses a completely language-independent text format, but also uses conventions similar to the C language family (including C, C, C#, Java, JavaScript, Perl, Python, etc.). These properties make JSON an ideal data exchange language. It is easy for humans to read and write, and it is also easy for machines to parse and generate (generally used to increase network transmission rates).

Json simply means objects and arrays in JavaScript, so these two structures are objects and arrays. Various complex structures can be expressed through these two structures.

1. Object: The object is represented in js as the content enclosed by "{}", and the data structure is the key-value pair structure of {key: value, key: value,...}. In the language of objects, key is the attribute of the object, and value is the corresponding attribute value, so it is easy to understand. The value method is object.key to obtain the attribute value. The type of this attribute value can be a number, a string, an array, or an object. kind.

2. Array: The array in js is the content enclosed by square brackets "[]". The data structure is ["java", "javascript", "vb",...], and the value method is As in all languages, using index acquisition, the type of field value can be numbers, strings, arrays, or objects.

Complex data structures can be combined through the two structures of objects and arrays.

You need to import the json.jar package before using JSON

Transfer a single object:

Create a new one servlet

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

Copy after login

The effect is as follows:

jsp 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>

Copy after login

The effect is as follows:

##Transfer a collection or array:

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

Copy after login

The effect is as follows:

jsp 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:"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>

Copy after login

The effect is as follows:

The above is what I compiled for everyone, I hope It will be helpful to everyone in the future.

Simple implementation of AJAX paging effect (graphic tutorial)

When using frameworks such as Ajax or Easyui Json-lib solution (graphic tutorial)

Detailed explanation of the method of using ajax to transfer arrays and receive in the background

The above is the detailed content of ajax uses json to realize data transmission. For more information, please follow other related articles on the PHP Chinese website!