jsonp跨域 

 <!DOCTYPT html>
 <html>
   <head>
       <meta charset="utf-8">
       <title>jsonp跨域</title>
       <script src="jquery-1.7.2.js"></script>
       <!-- 1、sript.src实现跨域 -->
       <script>
         function showData(result){
           var data = JSON.stringify(result) // 将对象编码成JSON字符串
           $('#text').val(data) //设置值
         }
         $(document).ready(function(){
           $('#btn').click(function(){
             // 向头部添加一个脚本，改脚本发起一个跨域请求
             $('head').append('<script src="http://localhost:9090/student?callback=showData"><\/script>')
           })
         })
       </script>
       <!-- 2、jquery的ajax跨域 -->
       <script>
         $(document).ready(function(){
           $('#btn').click(function(){
             $.ajax({
               url: 'http://localhost:9090/student',
               type: 'GET',
               dataType: 'jsonp', // 返回的数据格式
               jsonpCallback: 'showData', // 指定回调函数名称，如果没有，则默认为success函数
               success: function(data){
                 var result = JSON.stringify(data)
                 $('#text').val(result)
               }
             })
           })
         })
       </script>
   </head>
   <body>
     <input type="button" id="btn" value="跨域获取数据" />
     <textarea id="text" style="width: 400px; height: 100px;"></textarea>
   </body>
 </html>

 

posted @ 2018-08-20 15:07  你是海上的烟火  阅读(137)  评论(0)    收藏  举报