用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>