jquery 异步跨域请求后台数据

来源：互联网发布：mac如何导出iphone照片编辑：程序博客网时间：2024/06/05 19:18

废话不多说直接上代码:

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

0 0