jsonp跨域

发布时间：2020-12-16 18:43:58 所属栏目：百科来源：网络整理

导读：1 !DOCTYPT html 2 html 3 head 4 meta charset="utf-8" 5 titlejsonp跨域/title 6 script src="jquery-1.7.2.js"/script 7 !-- 1、sript.src实现跨域 -- 8 script 9 function showData(result){ 10 var data = JSON.stringify(result) // 将对象编码成JSON

 1 <!DOCTYPT html>
 2 <html>
 3   <head>
 4       <meta charset="utf-8">
 5       <title>jsonp跨域</title>
 6       <script src="jquery-1.7.2.js"></script>
 7       <!-- 1、sript.src实现跨域 -->
 8       <script>
 9         function showData(result){
10           var data = JSON.stringify(result) // 将对象编码成JSON字符串
11           $(‘#text‘).val(data) //设置值
12         }
13         $(document).ready(function(){
14           $(‘#btn‘).click(function(){
15             // 向头部添加一个脚本，改脚本发起一个跨域请求
16             $(‘head‘).append(‘<script src="http://localhost:9090/student?callback=showData"></script>‘)
17           })
18         })
19         // 也可以设置$.ajax,jsonCallback: ‘callback‘
20       </script>
21       <!-- 2、jquery的ajax跨域 -->
22       <script>
23         $(document).ready(function(){
24           $(‘#btn‘).click(function(){
25             $.ajax({
26               url: ‘http://localhost:9090/student‘,27               type: ‘GET‘,28               dataType: ‘jsonp‘,//指定服务器返回的数据类型
29               success: function(data){
30                 var result = JSON.stringify(data)
31                 $(‘#text‘).val(result)
32               }
33             })
34           })
35         })
36       </script>
37   </head>
38   <body>
39     <input type="button" id="btn" value="跨域获取数据" />
40     <textarea id="text" style="width: 400px; height: 100px;"></textarea>
41   </body>
42 </html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!