Of Stack

jQuery Ajax Front and Back Ends Interact with JSON Example

  • 2021-08-05 07:59:48
  • OfStack

Requirements:

The front end transmits json to the back end through jQuery Ajax, the back end receives json, processes json, and the back end returns one json to the front end

The way servlet is used here

1. Adopt the $. post method

index. jsp page 


<!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 : " Male " 
    }, function(data) { 
      var obj = eval('(' + data + ')'); 
      alert(obj.success); 
    }); 
  } 
</script> 
</head> 
<body> 
   Users ID: 
  <input type="text" id="userid" name="userid"> <span id="msg"></span> 
  <br> <button onclick="checkUserid()"> Transmission </button> 
</body> 
</html>

The code for CheckServlet. Java is as follows 


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 { 
    /* Set the character set to 'UTF-8'*/ 
    request.setCharacterEncoding("UTF-8"); 
    response.setCharacterEncoding("UTF-8"); 
    String userid = request.getParameter("userid"); //  Receive userid 
    String sex = request.getParameter("sex");// Receiving gender  
    System.out.println(userid); 
    System.out.println(sex); 
 
    // Write the returned JSON 
    PrintWriter pw = response.getWriter(); 
    String json = "{'success':' Success ','false':' Failure '}"; 
    pw.print(json); 
    pw.flush(); 
    pw.close(); 
 
  } 
}

Since servlet is used here, web. xml should be configured 


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

Enter 1 ID on the page, which can be received and printed in the background. The background writes back JSON through PrintWriter and returns to the front end. The front end converts JSON into Object object through eval, and obtains JSON value through obj. name

2. Adopt the method of $. get, just change post in jsp page to 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:" Male " 
      }, 
      function(data){ 
        var obj = eval('('+data+')'); 
        alert(obj.success); 
      } 
    ); 
  } 
</script> 
</head> 
<body> 
 
   Users ID: 
  <input type="text" id="userid" name="userid"> <span id="msg"></span> 
    <br> 
      <button onclick="checkUserid()"> Transmission </button> 
</body> 
</html>

The results were similar to those of $. post1

3. Through the $. ajax method 


<!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 : " Male " 
      }, 
      url : "Ajax/CheckServlet", 
      success : function(data) { 
        var obj = eval('(' + data + ')'); 
      alert(obj.success); 
      }, 
      error : function() { 
      }, 
      complete : function() { 
      } 
    }); 
  } 
</script> 
</head> 
<body> 
 
   Users ID: 
  <input type="text" id="userid" name="userid"> <span id="msg"></span> 
    <br> 
      <button onclick="checkUserid()"> Transmission </button> 
</body> 
</html>

The ajax method can also be divided into post and get methods, and the sending mode can be modified by modifying type

The result is the same as Method 1

Related articles: