jQuery Ajax前后端使用JSON进行交互示例

需求：

前端通过jQuery Ajax传输json到后端，后端接收json，对json进行处理，后端返回一个json给前端

这里使用servlet的方式

1、采用$.post方法

index.jsp页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html; charset=UTF-8"%>
<html>
<head>
<title></title>
<script src="js/jquery-1.12.2.js"></script>
<script language="JavaScript">
  function checkUserid() {
    $.post('Ajax/CheckServlet',//url
    {
      userid : $("#userid").val(),
      sex : "男"
    }, function(data) {
      var obj = eval('(' + data + ')');
      alert(obj.success);
    });
  }
</script>
</head>
<body>
  用户ID:
  <input type="text" id="userid" name="userid"> <span id="msg"></span>
  <br> <button onclick="checkUserid()">传输</button>
</body>
</html> 

CheckServlet.Java代码如下

package com.ajax; 

import java.io.IOException;
import java.io.PrintWriter; 

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; 

public class CheckServlet extends HttpServlet { 

  public void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    this.doPost(request, response);
  } 

  public void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    /*设置字符集为'UTF-8'*/
    request.setCharacterEncoding("UTF-8");
    response.setCharacterEncoding("UTF-8");
    String userid = request.getParameter("userid"); // 接收userid
    String sex = request.getParameter("sex");//接收性别
    System.out.println(userid);
    System.out.println(sex); 

    //写返回的JSON
    PrintWriter pw = response.getWriter();
    String json = "{'success':'成功','false':'失败'}";
    pw.print(json);
    pw.flush();
    pw.close(); 

  }
}

由于这里采用的是servlet的方式，所以要配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  id="WebApp_ID" version="3.1">
  <display-name>Ajax</display-name> 

  <servlet>
    <servlet-name>CheckServlet</servlet-name>
    <servlet-class>com.ajax.CheckServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>CheckServlet</servlet-name>
    <url-pattern>/Ajax/CheckServlet</url-pattern>
  </servlet-mapping>
</web-app>

在页面输入一个ID，可以在后台接收到并且打印出来，后台通过PrintWriter进行回写JSON返回前端，前端通过eval将JSON变换为Object对象，通过obj.name获取JSON值

2、采用$.get方法，只需要将jsp页面里面的post改为get即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html; charset=UTF-8"%>
<html>
<head>
<title></title>
<script src="js/jquery-1.12.2.js"></script>
<script language="JavaScript">
  function checkUserid() {
    $.get(
      'Ajax/CheckServlet',//url
      {
        userid:$("#userid").val(),
        sex:"男"
      },
      function(data){
        var obj = eval('('+data+')');
        alert(obj.success);
      }
    );
  }
</script>
</head>
<body> 

  用户ID:
  <input type="text" id="userid" name="userid"> <span id="msg"></span>
    <br>
      <button onclick="checkUserid()">传输</button>
</body>
</html>

结果与$.post一样

3、通过$.ajax方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html; charset=UTF-8"%>
<html>
<head>
<title></title>
<script src="js/jquery-1.12.2.js"></script>
<script language="JavaScript">
  function checkUserid() {
    $.ajax({
      type : 'post',
      data : {
        userid : $("#userid").val(),
        sex : "男"
      },
      url : "Ajax/CheckServlet",
      success : function(data) {
        var obj = eval('(' + data + ')');
      alert(obj.success);
      },
      error : function() {
      },
      complete : function() {
      }
    });
  }
</script>
</head>
<body> 

  用户ID:
  <input type="text" id="userid" name="userid"> <span id="msg"></span>
    <br>
      <button onclick="checkUserid()">传输</button>
</body>
</html>

$.ajax方法也是可以分为post和get方法的，通过修改type来修改发送的方式

结果与方法1是相同的

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。