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

柔情只为你懂 2022-07-24 03:25 222阅读 0赞

需求：

前端通过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 οnclick="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 οnclick="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 οnclick="checkUserid()">传输</button>
    </body>
    </html>

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

结果与方法1是相同的