前端在本地模擬跨域獲取后端數據


用ajax獲取數據的時候遇到跨域的時候通常要用jsonp的方式,這種方式需要前后端協調和統一的東西比較多(回調函數名稱,參數等),遇到過很多公開的接口好像壓根就沒有提供什么回調函數。

這種情況的時候我們自己可以在一個同域的服務器端先獲取數據,然后在用ajax來請求。

平時要做一些ajax練習的時候都會用這種方法。

首先需要有一個服務器環(php)來接收接口的數據:

1 <?php  
2      header("content-type: text/html");  
3      $url = 'http://v.6.cn/event/history/index.php?act=';  
4      //http://v.6.cn/event/history/index.php?act=getRoom
5      $id = $_GET['act'];//getRoom
6      //$id =101010100;
7      $data = file_get_contents($url.$id);
8      echo $data;
9 ?>

然后客戶端需要寫一個ajax請求:

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ajax-test</title>
 6 </head>
 7 <body>
 8     <div id="J_AjaxTest">click here</div>
 9     <div id="J_AjaxContent">show content here</div>
10     <script src="/6rooms/html/js/jquery.js"></script>
11     <script>
12         $(function(){
13             $('#J_AjaxTest').bind('click', function(event) {
14                 /* Act on the event */
15                 $.ajax({
16                     url: 'getdata-gsh.php',
17                     type: 'GET',
18                     dataType: 'json',
19                     data: {act: 'getRoom'},
20                     success : callback
21                 })
22             });
23             function callback (obj){
24                 if (obj.flag ==0) {
25                     var list = '<ul></ul>';
26                     $('#J_AjaxContent').html(list);
27                     $.each(obj.content, function(index, val) {
28                          /* iterate through array or object */
29                          var listItem = '<li>書名:'+val.title+'。人氣:'+val.live.count+'</li>';
30                          $('#J_AjaxContent ul').append(listItem);
31                     });
32                 }
33                 //console.log(obj.flag);
34             }
35         })
36     </script>
37 </body>
38 </html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM