首頁 > 後端開發 > php教程 > $.ajax和$.getJson解決跨域請求

$.ajax和$.getJson解決跨域請求

WBOY
發布: 2016-08-08 09:30:13
原創
980 人瀏覽過

寫js時總是會遇到跨域請求的問題,現在了解了兩種方法,記錄之:

1)使用$.ajax,但是返回資料類型要設定為jsonp,範例:

     $.ajax({
        type: 'get',
        contentType: "application/json; charset=utf-8",      
        url: "http://localhost:8080/aqi/getCityList.php",
        dataType: 'jsonp',
        headers: {
            Accept: "application/json",
            "Access-Control-Allow-Origin": "*"
        },
        crossDomain: true,
        async: false,
        jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
        jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
        success:function(json){
          getCityListSuccess(json);
        },
        error: function (data, textStatus, errorThrown) {
            console.log("error" + ' ' + JSON.stringify(data) + textStatus + errorThrown);
        }
    });
登入後複製
PHP端的程式碼為:
<?php
	header("Content-Type: text/html;charset=utf-8");
  	$db_name="aqidata.db";
	$conn = new sqlite3($db_name);
	$callback = $_GET[&#39;callback&#39;];
	$resultarray=array();
    <span style="white-space:pre">	</span>$sql = "select * from 'city' where 1=1 order by id";
    <span style="white-space:pre">	</span>$result = $conn->query($sql);
    <span style="white-space:pre">	</span>$i=0;
    <span style="white-space:pre">	</span>while ($row = $result->fetchArray(SQLITE3_ASSOC)) {
    	<span style="white-space:pre">	</span>$resultarray[$i]=$row;
	    <span style="white-space:pre">	</span>$i++;
    <span style="white-space:pre">	</span>}

	echo $callback.'('.json_encode($resultarray).')';


?>
登入後複製
注意:1、ajax中要指定jsonp參數,然後後端要把回呼函數名稱寫入到回傳值中。

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

2)用$.getJSON,這個函數就支援跨域呼叫。

     $.getJSON("http://localhost:8080/aqi/getCityList.php",function(json){
      getCityListSuccess(json);
     });
登入後複製
但是後端程式碼(php)要加入:
header("Access-Control-Allow-Origin:*");
登入後複製
不然會報錯:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 
登入後複製
我參考的部落格文章是:http://blog.163.com/lvshutao@126/blog/static/164637467201442925326374672014425972536637467201422539

以上就介紹了$.ajax和$.getJson解決跨域請求,包括了方面的內容,希望對PHP教程有興趣的朋友有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板