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。