前面已经实现了将数据GET到后台。GET方法实现比较简单,直接将信息添加到url中即可。本篇主要介绍通过Ajax将数据POST到后台。
由于POST方法可以传递大量数据到后台,所以为了使格式的统一,将数据设置为Json格式。这就涉及到如何将数据封装为json格式,因此添加json2.js到HTML页面。
web.xml中servlet相关配置不变(参考GET篇)
Json数据格式设计
若HTML页面中有两个输入框,其“name”属性,分别设置为“uName”和“uPass”;“id”属性分别设计为“userName”和“password”。那么就可以在自定义的js页面中直接设置:
var UserName = $("#userName").val();//获取id为userName标签的value值
var Password = $("#password").val();//获取id为password标签的value值
var user = {uName:UserName,uPass:Password};// 1
如果没有设置标签的name属性,则可以将代码1的uName和uPass进行自定义,如2所示:
var user = {"uName":UserName,"uPass":Password};// 2
传递Json数据到后台
在这里通过Ajax将数据传递到后台,并获取后台反馈信息
$.ajax({
type : "POST",//POST方法
url : "login",//Servlet中对应的url-pattern
data :user,//上面定义的json数据
dataType:"json",//后台返回的数据格式类型
success : function(msg) {
console.log(msg);//控制台输入后台返回的数据信息
},
error:function(){
//如果后台无法返回数据到前台,则输出前台想要传到到后台的信息和Error标识
console.info(JSON.stringify(user)+"\nError");
}
});
由于user只是一个对象,直接输出看不到信息内容,只能看考[object,object];因此需要转换为JSON.stringify(user)进行输出,这样才能看到具体信息。
后台传递Json数据到前台
由于在前台js代码中设置dataType为“json”格式,因此后台的反馈信息,必须是严格的json数据格式。后台代码如下:
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("处理POST请求...");
//获取前台data数据中的uName和uPass
String name = request.getParameter("uName");
String password = request.getParameter("uPass");
//设计后台输出格式
JsonObject jo = new JsonObject();
jo.addProperty("result", "sucess");
//输出到前台
PrintWriter out = response.getWriter();
out.print(jo.toString());
//后台控制台查看输出信息
System.out.println(jo.toString());
}