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

2024-02-27 10:04:03 52

需求：

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

这里使用servlet的方式

1、采用$.post方法

index.jsp页面


<%@pagecontentType="text/html;charset=UTF-8"%>





functioncheckUserid(){
$.post('Ajax/CheckServlet',//url
{
userid:$("#userid").val(),
sex:"男"
},function(data){
varobj=eval('('+data+')');
alert(obj.success);
});
}



用户ID:


传输

CheckServlet.Java代码如下

packagecom.ajax;

importjava.io.IOException;
importjava.io.PrintWriter;

importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;

publicclassCheckServletextendsHttpServlet{

publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
this.doPost(request,response);
}

publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
/*设置字符集为'UTF-8'*/
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
Stringuserid=request.getParameter("userid");//接收userid
Stringsex=request.getParameter("sex");//接收性别
System.out.println(userid);
System.out.println(sex);

//写返回的JSON
PrintWriterpw=response.getWriter();
Stringjson="{'success':'成功','false':'失败'}";
pw.print(json);
pw.flush();
pw.close();

}
}

由于这里采用的是servlet的方式，所以要配置web.xml



Ajax


CheckServlet
com.ajax.CheckServlet


CheckServlet
/Ajax/CheckServlet

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

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


<%@pagecontentType="text/html;charset=UTF-8"%>





functioncheckUserid(){
$.get(
'Ajax/CheckServlet',//url
{
userid:$("#userid").val(),
sex:"男"
},
function(data){
varobj=eval('('+data+')');
alert(obj.success);
}
);
}




用户ID:



传输

结果与$.post一样

3、通过$.ajax方法


<%@pagecontentType="text/html;charset=UTF-8"%>





functioncheckUserid(){
$.ajax({
type:'post',
data:{
userid:$("#userid").val(),
sex:"男"
},
url:"Ajax/CheckServlet",
success:function(data){
varobj=eval('('+data+')');
alert(obj.success);
},
error:function(){
},
complete:function(){
}
});
}




用户ID:



传输

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

结果与方法1是相同的

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

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

热门推荐

随机推荐