zoukankan      html  css  js  c++  java
  • 前端在本地模拟跨域获取后端数据

    用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>
  • 相关阅读:
    mysql 主从服务器配置
    Linux命令
    Kali
    Python进阶
    性能测试工具
    sphinx搜索
    页面静态化
    PHP API接口
    线程的生命周期
    多线程的创建
  • 原文地址:https://www.cnblogs.com/snowinmay/p/3415498.html
Copyright © 2011-2022 走看看