jQuery jsonp跨域请求

最新推荐文章于 2024-04-14 22:43:02 发布

王子老师

最新推荐文章于 2024-04-14 22:43:02 发布

阅读量460

点赞数

分类专栏： Python 文章标签： jquery 前端 javascript

原文链接：http://www.cnblogs.com/chiangchou/

版权

Python 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

海压竹枝低复举，风吹山角晖还明

如何使用 script src="" 来完成一个跨域请求：

当点击"跨域获取数据"的按钮时，添加一个 script 标签，用于发起跨域请求；注意看请求地址后面带了一个callback=showData的参数；

showData即是回调函数名称，传到后台，用于包裹数据。数据返回到前端后，就是showData(result)的形式，因为是script脚本，所以自动调用showData函数，而result就是showData的参数。

至此，我们算是跨域把数据请求回来了，但是比较麻烦，需要自己写脚本发起请求，然后写个回调函数处理数据，不是很方便。

1 <%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
 2 <html>
 3 <head>
 4     <title>跨域测试</title>
 5     <script src="js/jquery-1.7.2.js"></script>
 6     <script>
 7         //回调函数
 8         function showData (result) {
 9             var data = JSON.stringify(result); //json对象转成字符串
10             $("#text").val(data);
11         }
12 
13         $(document).ready(function () {
14 
15             $("#btn").click(function () {
16                 //向头部输入一个脚本，该脚本发起一个跨域请求
17                 $("head").append("<script src='http://localhost:9090/student?callback=showData'><\/script>");
18             });
19 
20         });
21     </script>
22 </head>
23 <body>
24     <input id="btn" type="button" value="跨域获取数据" />
25     <textarea id="text" style="width: 400px; height: 100px;"></textarea>
26 
27 </body>
28 </html>

1 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 2     response.setCharacterEncoding("UTF-8");
 3     response.setContentType("text/html;charset=UTF-8");
 4 
 5     //数据
 6     List<Student> studentList = getStudentList();
 7 
 8 
 9     JSONArray jsonArray = JSONArray.fromObject(studentList);
10     String result = jsonArray.toString();
11 
12     //前端传过来的回调函数名称
13     String callback = request.getParameter("callback");
14     //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
15     result = callback + "(" + result + ")";
16 
17     response.getWriter().write(result);
18 }

jquery的jsonp方式跨域请求：

服务端代码不变，js代码如下：最简单的方式，只需配置一个dataType:‘jsonp’，就可以发起一个跨域请求。jsonp指定服务器返回的数据类型为jsonp格式，可以看发起的请求路径，自动带了一个callback=xxx，xxx是jquery随机生成的一个回调函数名称。

这里的success就跟上面的showData一样，如果有success函数则默认success()作为回调函数。

 <%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
 2 <html>
 3 <head>
 4     <title>跨域测试</title>
 5     <script src="js/jquery-1.7.2.js"></script>
 6     <script>
 7 
 8         $(document).ready(function () {
 9 
10             $("#btn").click(function () {
11 
12                 $.ajax({
13                     url: "http://localhost:9090/student",
14                     type: "GET",
15                     dataType: "jsonp", //指定服务器返回的数据类型
16                     success: function (data) {
17                         var result = JSON.stringify(data); //json对象转成字符串
18                         $("#text").val(result);
19                     }
20                 });
21 
22             });
23 
24         });
25     </script>
26 </head>
27 <body>
28     <input id="btn" type="button" value="跨域获取数据" />
29     <textarea id="text" style="width: 400px; height: 100px;"></textarea>
30 
31 </body>
32 </html>

使用jsonp时也只能使用GET方式发起跨域请求

王子老师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery jsonp跨域请求

海压竹枝低复举，风吹山角晖还明如何使用 script src="" 来完成一个跨域请求：当点击"跨域获取数据"的按钮时，添加一个 script 标签，用于发起跨域请求；注意看请求地址后面带了一个callback=showData的参数；showData即是回调函数名称，传到后台，用于包裹数据。数据返回到前端后，就是showData(result)的形式，因为是script脚本，所以自动调用showData函数，而result就是showData的参数。至此，我们算是跨域把数据请求回来了，但是比较.
复制链接

扫一扫