Ajax前后端使用JSON进行交互实现方法_知识百科

本文主要介绍了jquery ajax前后端使用json进行交互示例，实现前端通过jquery ajax传输json到后端，后端接收json，对json进行处理，后端返回一个json给前端，有兴趣的可以了解一下，希望能帮助到大家。

需求：

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

这里使用servlet的方式

1、采用$.post方法

点击下载“修复打印机驱动工具”；

index.jsp页面

 <%@ page contentType="text/html; charset=UTF-8"%>    <ｓｃｒｉｐｔ src="js/jquery-1.12.2.js"> <ｓｃｒｉｐｔ language="JavaScript"> function checkUserid() { $.post('Ajax/CheckServlet',//url { userid : $("#userid").val(), sex : "男" }, function(data) { var obj = ｅｖａｌ('(' + data + ')'); alert(obj.success); }); }    用户ID:

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

 lns: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"> Ajax  CheckServlet com.ajax.CheckServlet   CheckServlet /Ajax/CheckServlet

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

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

 <%@ page contentType="text/html; charset=UTF-8"%>    <ｓｃｒｉｐｔ src="js/jquery-1.12.2.js"> <ｓｃｒｉｐｔ language="JavaScript"> function checkUserid() { $.get( 'Ajax/CheckServlet',//url { userid:$("#userid").val(), sex:"男" }, function(data){ var obj = ｅｖａｌ('('+data+')'); alert(obj.success); } ); }    用户ID:

结果与$.post一样

3、通过$.ajax方法

 <%@ page contentType="text/html; charset=UTF-8"%>    <ｓｃｒｉｐｔ src="js/jquery-1.12.2.js"> <ｓｃｒｉｐｔ language="JavaScript"> function checkUserid() { $.ajax({ type : 'post', data : { userid : $("#userid").val(), sex : "男" }, url : "Ajax/CheckServlet", success : function(data) { var obj = ｅｖａｌ('(' + data + ')'); alert(obj.success); }, error : function() { }, complete : function() { } }); }    用户ID:

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

结果与方法1是相同的