要使用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)