jQuery AJAX傳JSON數據使用小結

　　要使用jquery首先要引入jquery相應文件，下載jQuery(https://code.jquery.com),選擇相應的版本,右鍵另存爲……即可。
　　在前端中引入jquery (我使用還是2.1.4版本)：

<!--加載百度cdn jquery失敗時使用本地的jquery-->
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    !window.jQuery && document.write('<script src="js/jquery-2.1.4.min.js"><\/script>');
</script>

　　封裝要傳輸的數據：

function getFormData() 
{
    var json = 
    {
        "username": $("#username").val()
        , "pwd": $("#pwd").val()
    };
    return json;
}

1、$.ajax()

函數原型：$.ajax({name:value, name:value, … })：默認爲異步請求。

$.ajax(
{
    type: "POST",
    url: "./JsonTestServlet",
    data: {jsonData: JSON.stringify(getFormData())},
    success: function(msg)
    {
        msg = eval("(" + msg + ")");
        //msg = JSON.parse(msg);
        alert(msg.username + " " + msg.pwd);
    },
    error: function(errmsg) 
    {
        alert("提交失敗！");
    }
});

　　這裏必須轉換一下，因爲後臺傳來的json數據是以字符串形式傳過來的。當然這裏使用msg = JSON.parse(msg);也是可以的，JSON.parse()是將json數據從字符串中解析出來，而JSON.stringify()是將json數據轉換成字符串。
　　 eval() 函數可解析字符串，並執行其中的的 JavaScript 代碼。由於json數據是以”{}”的方式來開始以及結束的，在JS中，它會被當成一個語句塊來處理，所以必須強制性的將它轉換成一種表達式。加上圓括號的目的是迫使eval函數在處理JavaScript代碼的時候強制將括號內的表達式（expression）轉化爲對象，而不是作爲語句（statement）來執行。

2、$.get()

函數原型：$.get(url,data,function(data,status,xhr),dataType)：使用POST方式來進行異步請求，後三個參數爲可選。

$.get("./JsonTestServlet", {jsonData: JSON.stringify(getFormData())}, function(data) 
{
    data = JSON.parse(data);
    alert(data[0].username + data[0].pwd);
}); 

　　這裏也需要轉換。

3、$.post()

函數原型：$.post(url,data,function(data,status,xhr),dataType)：使用POST方式來進行異步請求，後三個參數爲可選。

$.post("./JsonTestServlet", {jsonData: JSON.stringify(getFormData())}, function(info) 
{
    info = eval("(" + info + ")");
    alert(info.username + info.pwd);
}); 

　　這裏同樣需要轉換。

4、$.getJSON()

函數原型：$.getJSON(url,data,success(data,status,xhr))：使用GET方式來進行異步請求獲取JSON數據，後兩個參數可選。

$.getJSON("./JsonTestServlet", {jsonData: JSON.stringify(getFormData())}, function(data) 
{
    alert(data[0].username + data[0].pwd);
});

　　這裏不需要轉換，因爲$.getJSON()函數接收的就是json數據。

　　*注： 在後臺傳輸json數據時，我測試了單個json對象和json數組兩種方式。總的來說接收方式沒什麼區別，但是在傳輸json數組時，前端接收轉換的方式可以這樣：info = eval(info);，也就是不加“()”也可以，原因是json數組是這樣的[{},{},{},...],eval函數直接將json數組對象解析出來了。

參考資料

[1] jQuery AJAX 方法(http://www.runoob.com/jquery/jquery-ref-ajax.html)
[2] jquery eval解析JSON中的注意點介紹(http://www.jb51.net/article/40842.htm)