jsonp跨域

時間 2019-11-08

標籤 jsonp 欄目 JSON 简体版

原文原文鏈接

 <!DOCTYPT html>
 <html>
   <head>
       <meta charset="utf-8">
       <title>jsonp跨域</title>
       <script src="jquery-1.7.2.js"></script>
       <!-- 一、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>
       <!-- 二、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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。