zoukankan      html  css  js  c++  java
  • web三种跨域请求数据方法

    web三种跨域请求数据方法
    以下测试代码使用php,浏览器测试使用IE9,chrome,firefox,safari
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" id="loadjson"></script>
        <script type="text/javascript">
        // 第一种
        // test1.php在服务器设置请允许跨域(注意:IE9测试不通过)
        $.ajax({
               type: 'POST',
               url: 'http://127.0.0.1:8081/test/test1.php',
               data: 'name=penngo',
               dataType: 'json',
               success: function(msg){
                  $('#json').html(JSON.stringify(msg));
               }
            });
     
        // 第二种
        // test2.php使用jsonp
        $.ajax({
               type: 'GET',
               url: 'http://127.0.0.1:8081/test/test2.php?callback=?',
               data: 'name=penngo',
               dataType: 'jsonp',
               success: function(msg){
                  $('#jsonp').html(JSON.stringify(msg));
               }
            });
     
        // 使用js标签加载方式,该方式为异步,通过testjs()回调
        var testjs = function(msg){
             $('#js').html(JSON.stringify(msg));
        }
        $('#loadjson')[0].src = 'http://127.0.0.1:8081/test/test3.php?method=testjs&name=penngo';
        </script>
     
    </head>
    <body>
        header跨域:
        <div id="json">
            
        </div>
        <br/>
        jsonp跨域:
        <div id="jsonp">
            
        </div>
        <br/>
        js请求实现跨域:
        <div id="js">
            
        </div>
    </body>
    </html>
     
    服务器端处理
    test1.php
    <?php
        header("Access-Control-Allow-Origin: *");
        $name = $_REQUEST['name'];
        $result = array('success'=>1, 'name'=>$name);
        echo json_encode($result);
    ?>
     
    test2.php
    <?php
        $callback = $_REQUEST['callback'];
        $name = $_REQUEST['name'];
        $result = array('success'=>1, 'name'=>$name);
        $jsonData = json_encode($result);
        echo $callback . "(" . $jsonData . ")";
    ?>
     
    test3.php
    <?php
        $method = $_REQUEST['method'];
        $name = $_REQUEST['name'];
        $result = array('success'=>1, 'name'=>$name);
        $jsonData = json_encode($result);
        echo "$method($jsonData);";
    ?>
     
    IE9测试,页面输出内容
    header跨域: 
    jsonp跨域: 
    {"success":1,"name":"penngo"}
    js请求实现跨域: 
    {"success":1,"name":"penngo"}
    chrome,firefox,safari测试,页面输出内容
    header跨域:
    {"success":1,"name":"penngo"}
    jsonp跨域:
    {"success":1,"name":"penngo"}
    js请求实现跨域:
    {"success":1,"name":"penngo"}
     
     
  • 相关阅读:
    C++继承与派生的概念、什么是继承和派生
    为什么要用重载(学习笔记)
    C++ 为什么要用覆盖(学习笔记)
    做一个爱分享的人技术牛人博客
    okhttp head()请求
    android 8.0 前台服务问题
    android 配置 kotlin 使用jdk1.8编译
    java 获取apk包的版本号、包路径。权限信息
    vue 自定义input控件 v-model 绑定数据问题
    android ViewModel 列表数据获取条数
  • 原文地址:https://www.cnblogs.com/lxg0/p/5646437.html
Copyright © 2011-2022 走看看