zoukankan      html  css  js  c++  java
  • jsonp和CORS跨域实现

    一、jsonp,使用jquery封装的$.ajax,返回数据类型要设置为jsonp

    示例:

    $.ajax({
        type: 'get',
        contentType: "application/json; charset=utf-8",
        url: "http://localhost:8080/aqi/getCityList.php",
        dataType: 'jsonp',
        < /span>
    jsonp: "callback",/ / 传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为: callback)
        jsonpCallback: "success_jsonpCallback", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名</span>
        success: function(json) {
            getCityListSuccess(json);
        },
        error: function(data, textStatus, errorThrown) {
            console.log("error" + ' ' + JSON.stringify(data) + textStatus + errorThrown);
        }
    });或者使用
    $.getJson, 在调用的url添加 & callback = ? $.getJSON("http://localhost:8080/aqi/getDetailsByTimepointAndCityId.php?callback=?", {
        "time_point": time_point,
        "city_id": city_id
    }, function(json) {
        $('#radar-dialog').css("display", "block");
        $('#radar-dialog').dialog({
            title: radar_cityname + "市," + timepoint,
             350,
        });
        formatRadarData(json);
    });

    PHP端的代码为:

    <?php
    header("Content-Type: text/html;charset=utf-8");
      $db_name="aqidata.db";
    $conn = new sqlite3($db_name);
    $callback = $_GET['callback'];
    $resultarray=array();
      $sql = "select * from 'city' where 1=1 order by id";
      $result = $conn->query($sql);
      $i=0;
      while ($row = $result->fetchArray(SQLITE3_ASSOC)) {
        $resultarray[$i]=$row;
    $i++;
      }
    echo $callback.'('.json_encode($resultarray).')';
    ?>

    注意:1、ajax中要指定jsonp参数,然后后端要把回调函数名称写入到返回值中。

    我参考的博文是:http://www.cnblogs.com/xcxc/p/3729660.html

    二、用CORS(Cross-Origin Resource Sharing),这个官方草案。

    就是在后端代码(php)加入:

    header("Access-Control-Allow-Origin:*");
  • 相关阅读:
    lnmp分离部署
    Nginx
    Keepalived脑裂监控
    KVM虚拟化
    mysql中间件proxysql实现mysql读写分离
    分离部署lnmp
    nginx
    Keepalived脑裂监控
    keepalived高可用
    KVM虚拟化
  • 原文地址:https://www.cnblogs.com/ziyoublog/p/10774505.html
Copyright © 2011-2022 走看看