Ajax发送POST请求的心路历程

好多年前就在项目中用ajax实现了页面部分数据的发送，当时用的是GET方法。

这次用POST方法实现同样的功能，竟然花费了不少的时间！

① 关于JQuery ajax的配置项说明

1 url : 请求的url。
2 type : http请求消息的方法，例如get,post等。
3 contentType : http请求消息的数据类型，例如json,text,xml等。
4 dataType : http响应消息的数据类型，可以不配置。

配置请求数据类型为：

contentType: "application/json;charset=utf-8"，额……问题来了。

② 415 Unsupported Media Type

这是响应的错误码，直译就是不支持的媒体类型。既然是服务器响应的，那就是说服务器不支持媒体类型。

我配置的数据类型为json，用的Spring MVC，那就是需要增加Spring的json数据支持。

查询对比了一下，发现jackson库是JSON封装解析效率比较高，开发比较活跃的库。

③ 下载jackson库

从好几个mvn仓库中下载的版本竟然是错误的，弄的我差点开始怀疑人生。

最后还是从官网连接的仓库中下载了正确的版本。

理论上除了导入jackson库，还需要适当的配置让Spring支持JSON解析。
但是一个<context:annotation-config />配置就自动的完成了相关配置。
省事了，也会让人有些疑惑。凡事没有绝对吧。

④ 400 Bad Request

新的错误来了，服务器响应“坏的请求”。

服务器的报错信息如下：Unrecognized token \'name\': was expecting (\'true\', \'false\' or \'null\')

从浏览器抓包如下：

1 Request Payload
2 name=test&passwd=123456

找到原因了，就是说服务器根据请求消息携带的媒体类型json做好了解析JSON数据的准备，然而找不到相关的数据键，因为事实上浏览器发出去的请求确实不是JSON格式的数据啊。

我是这么填写的数据：

data : {\'name\':\'test\',\'passwd\':\'123456\'},

就是说这么写看起来是JSON格式，事实上不是。那就明确一下数据格式吧，改动如下：

data : JSON.stringify({\'name\':\'test\',\'passwd\':\'123456\'}),

哈哈，终于前后台打通了~~~~

⑤ 完整的JS代码如下，友情提示：纸上得来终觉浅，绝知此事要躬行。

 1     $(document).ready(function() {
 2       $("#submitBtn").click(function(e) {
 3         e.preventDefault();
 4         var obj = $(this);
 5         var name = $("input[name=\'loginname\']").val();
 6         var passwd = $("input[name=\'loginpasswd\']").val();
 7         $.ajax({
 8           url : "http://localhost:8080/star/loginCheck/",
 9           type : "POST",
10           contentType: "application/json;charset=utf-8",
11           data : JSON.stringify({\'name\':name,\'passwd\':passwd}),
12           dataType : "text",
13           success : function(result) {
14             if (result == "success") {
15               obj.parents(\'form\').submit();
16             } else {
17             }
18           },
19           error:function(msg){
20             $(".notice").html(\'Error:\'+msg);
21           }
22         })
23         return false;
24       })
25     });
26   </script>

后记：

想让返回数据类型更加丰富，修改dataType为“json”。

结果发现无法跳转到success的回调函数。

既然不能调用success，那就看error回调函数吧：

Error:SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

最终原因如下：因为服务器返回的数据格式不是标准json，所以无法进入success。