json传值以及ajax接收详解

JSON传值以及AJAX接收详解

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前端与后端之间传递数据。在Web 开发中，通过AJAX方式向后端发送请求，也需要把数据以JSON格式发送过去，在后端处理完后再把结果以JSON格式返回前端，前端再解析成对象使用。本文将为您详细讲解JSON传值以及AJAX接收的过程及相关示例。

1. JSON传值

1.1 前端发送JSON值到服务器

在前端页面中定义一个JSON对象：

var user = {
  "name": "Kevin",
  "age": 30,
  "sex": "male"
};

然后通过AJAX方式向后台发送请求，把JSON对象转换成字符串格式：

$.ajax({
  url: 'url/submit',
  type: 'post',
  data: JSON.stringify(user),
  contentType: 'application/json',
  success: function(data) {
    console.log(data);
  }
});

在发送请求的过程中，使用JSON.stringify()方法将JSON对象转换成JSON字符串格式。其中contentType参数需要设置为application/json，表示发送的数据为JSON格式。

1.2 后端接收JSON值并处理

在后端服务器接收JSON字符串时，可以使用流的方式来读取数据。以下是一个使用Java语言进行JSON数据传输时的示例：

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONObject;

@WebServlet(name = "JsonServlet", urlPatterns = {"/json"})
public class JsonServlet extends HttpServlet {

  @Override
  protected void doPost(HttpServletRequest request,
      HttpServletResponse response) throws ServletException, IOException {
    BufferedReader br = request.getReader();
    StringBuilder sb = new StringBuilder();
    String line;
    while ((line = br.readLine()) != null) {
      sb.append(line);
    }
    JSONObject json = new JSONObject(sb.toString());
    String name = json.getString("name");
    int age = json.getInt("age");
    String sex = json.getString("sex");
    //后续逻辑处理
  }
}

在Java中，可以使用BufferedReader类来读取输入的流数据，然后将得到的字符串解析成JSON对象。最后通过访问JSON对象的属性即可获取传递的值。

1. AJAX接收JSON值

2.1 前端接收JSON值并解析

在前端页面中，定义一个事件处理函数，用于请求服务器返回JSON数据：

$.ajax({
  url: 'url/getData',
  type: 'get',
  dataType: 'json',
  success: function(data) {
    var name = data.name;
    var age = data.age;
    var sex = data.sex;
    //前端页面使用得到的数据进行渲染或者其他操作
  }
});

在请求服务器获取数据时，需要设置dataType参数为json，表示请求的数据类型为JSON格式。请求成功后，可以通过访问返回的JSON对象的属性来获取传递的值。

2.2 后端返回JSON值并发送

在服务器端返回JSON数据时，需要把数据对象转换成JSON字符串，并设置Content-Type为application/json。以下是使用Java语言进行JSON数据传输时的示例：

import java.io.IOException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONObject;

@WebServlet(name = "JsonServlet", urlPatterns = {"/json"})
public class JsonServlet extends HttpServlet {

  @Override
  protected void doGet(HttpServletRequest request,
      HttpServletResponse response) throws ServletException, IOException {
    JSONObject json = new JSONObject();
    json.put("name", "Kevin");
    json.put("age", 30);
    json.put("sex", "male");
    response.setContentType("application/json");
    response.getWriter().append(json.toString());
  }
}

在Java中，可以使用JSONObject类来构造JSON对象，然后通过response.getWriter()方法把JSON字符串发送到前端页面。

总结：

本文主要讲解了JSON传值以及AJAX接收JSON的示例。在前端页面中，通过JSON.stringify()方法将JSON对象转换成JSON字符串格式，并通过AJAX发送到服务器，然后在服务器端通过流的方式读取JSON字符串，并使用JSON对象解析出传递的数据。在后端服务器端返回JSON数据时，需要使用JSONObject类构造JSON对象，并通过response.getWriter()方法把JSON字符串发送到前端页面，前端页面再通过访问JSON对象的属性来获取传递的值。