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