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)