jquery 异步跨域请求后台数据

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/PZ0605/article/details/40651845

废话不多说直接上代码:

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



展开阅读全文

没有更多推荐了,返回首页