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)