前端在本地模拟跨域获取后端数据

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

 

posted @ 2013-11-09 12:17  snowinmay  阅读(10765)  评论(1)  编辑  收藏  举报