前台后台数据交互之Servlet & XMLHttpRequest（POST篇）

前面已经实现了将数据GET到后台。GET方法实现比较简单，直接将信息添加到url中即可。本篇主要介绍通过Ajax将数据POST到后台。
由于POST方法可以传递大量数据到后台，所以为了使格式的统一，将数据设置为Json格式。这就涉及到如何将数据封装为json格式，因此添加json2.js到HTML页面。

json2.js资源链接

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());
}