jquery 异步跨域请求后台数据
废话不多说直接上代码:
html页面代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../style/js/jquery-1.7.2.min.js"></script>
</head>
<script type="text/javascript">
function fn_test(){
$.ajax({
async:false,
url: "http://xxxx:8080/xx/test!test.action", //需要跨域访问的后台地址
type: "POST",
dataType: 'jsonp',// 跨域调用dataType必须指明为jsonp
//如果指明了为跨域调用,则jsonp的值默认为callback,也可以自己指定jsonp的值
//跨域访问服务器数据的返回格式:jsonp指明的值(返回的json字符串);
//如没有指明jsonp的值，则需要返回:callback(XXXXX);
//如指明了jsonp的值为:myCallBack,则需要返回myCallBack(XXXXX);
jsonp: 'myCallback',
//注意此处的data并不是返回的完整数据，而是括号里面的数据,如返回callback(true),则data的值为true，而不是callback(true)
success: function (data) {
var len = data.length;
for(var i=0;i<len;i++){
var obj =data[i];
alert(obj.id+":"+obj.name);
}
}
});
}
</script>
<body>
<input type="button" value="getData" onclick="fn_test();"/>
</body>
</html>
js代码中详细的注释，不再作具体解释，需要指明一下:jquery会将jsonp中指定的值做为参数，并生成类似当前时间戳的字符串为值，一起传到后台;
后台方法完整代码:
public void test(){
try {
PrintWriter out = response.getWriter();
String callback =request.getParameter("myCallback");//获取jsonp中的指定的参数值，如果js中没有指定，则默认为callback;
//注意返回的格式:callback([{"id":"1","name":"test1"}]); 即需要将实际返回的值将callback和括号包起来
out.print(callback+"([{\"id\":\"1\",\"name\":\"test1\"},{\"id\":\"2\",\"name\":\"test2\"}])");
} catch (IOException e) {
e.printStackTrace();
}
}
观察url多了一个参数: http://xxx:8080/xx/test!test.action?mycallback=jQuery172016909720206402334_1414725325519&_=1414725326921
另外，js也可以这样写:
$.post("http://localhost:8080/xxxx/test!test.action",function(data){
var len = data.length;
for(var i=0;i<len;i++){
var obj =data[i];
alert(obj.id+"=====>"+obj.name);
}
},"jsonp");//注意类型为jsonp