本文主要介绍了jQuery Ajax前后端使用JSON进行交互示例,实现前端通过jQuery Ajax传输json到后端,后端接收json,对json进行处理,后端返回一个json给前端,有兴趣的可以了解一下,希望能帮助到大家。
需求:
前端通过jQuery Ajax传输json到后端,后端接收json,对json进行处理,后端返回一个json给前端
这里使用servlet的方式
1、采用$.post方法
index.jsp页面
function checkUserid() {
$.post('Ajax/CheckServlet',//url
{
userid : $("#userid").val(),
sex : "男"
}, function(data) {
var obj = eval('(' + 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 {
/*设置字符集为'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
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返回前端,前端通过eval将JSON变换为Object对象,通过obj.name获取JSON值
2、采用$.get方法,只需要将jsp页面里面的post改为get即可
function checkUserid() {
$.get(
'Ajax/CheckServlet',//url
{
userid:$("#userid").val(),
sex:"男"
},
function(data){
var obj = eval('('+data+')');
alert(obj.success);
}
);
}
用户ID:
传输
结果与$.post一样
3、通过$.ajax方法
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() {
}
});
}
用户ID:
传输
$.ajax方法也是可以分为post和get方法的,通过修改type来修改发送的方式
结果与方法1是相同的
相关推荐: