Ajax前后端使用JSON进行交互实现方法

来源：互联网 2024-10-16 15:04:22

本文主要介绍了jquery ajax前后端使用json进行交互示例，实现前端通过jquery ajax传输json到后端，后端接收json，对json进行处理，后端返回一个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> <ｓｃｒｉｐｔ src="js/jquery-1.12.2.js"></ｓｃｒｉｐｔ> <ｓｃｒｉｐｔ language="JavaScript">   function checkUserid() {     $.post(&#39;Ajax/CheckServlet&#39;,//url     {       userid : $("#userid").val(),       sex : "男"     }, function(data) {       var obj = ｅｖａｌ(&#39;(&#39; + data + &#39;)&#39;);       alert(obj.success);     });   } </ｓｃｒｉｐｔ> </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 {     /*设置字符集为&#39;UTF-8&#39;*/     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 = "{&#39;success&#39;:&#39;成功&#39;,&#39;false&#39;:&#39;失败&#39;}";     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返回前端，前端通过ｅｖａｌ将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> <ｓｃｒｉｐｔ src="js/jquery-1.12.2.js"></ｓｃｒｉｐｔ> <ｓｃｒｉｐｔ language="JavaScript">   function checkUserid() {     $.get(       &#39;Ajax/CheckServlet&#39;,//url       {         userid:$("#userid").val(),         sex:"男"       },       function(data){         var obj = ｅｖａｌ(&#39;(&#39;+data+&#39;)&#39;);         alert(obj.success);       }     );   } </ｓｃｒｉｐｔ> </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> <ｓｃｒｉｐｔ src="js/jquery-1.12.2.js"></ｓｃｒｉｐｔ> <ｓｃｒｉｐｔ language="JavaScript">   function checkUserid() {     $.ajax({       type : &#39;post&#39;,       data : {         userid : $("#userid").val(),         sex : "男"       },       url : "Ajax/CheckServlet",       success : function(data) {         var obj = ｅｖａｌ(&#39;(&#39; + data + &#39;)&#39;);       alert(obj.success);       },       error : function() {       },       complete : function() {       }     });   } </ｓｃｒｉｐｔ> </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是相同的