欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJs解決跨域問題案例詳解(簡單方法)

 更新時間:2016年05月19日 09:35:04   作者:白狼  
本文通過一個案例給大家介紹angularJs解決跨域問題,非常具有參考借鑒價值,感興趣的朋友一起學習吧

首先我們做點準備說明,不然你明白我說的是啥意思別人不明白,就算別人明白了那總有人不明白,那你要說了,我的意思是這個說明必須要做了,答案是必須的,為了更好的方便大家理解嘛。

我們以兩個主域名或者一個主域名+一個二級域名為例,均可演示跨域問題。

客戶端 a.com

服務端 b.com或者s.a.com

angularJs版本 V1.2.25

準備工作做得很充分嘛,就差把我們的編輯器是subline暴露出來了,這個一般人我是不告訴他滴。

有人嚷嚷了,這問題老早就有了,你現(xiàn)在提出來有啥意義呢?難不成你還能把花忽悠開了?嗯,我還真能把花寫開了??磻虬桑覀儽酒涎莸氖峭暾婵缬?qū)嵗?/p>

接下來我們先看客戶端是如何請求數(shù)據(jù)的

注意哦,我們的代碼是寫在a.com域名下面的

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('appCtrl', ['$scope', function ($scope) {
$http({
method: 'JSONP',
url: 'http://www.b.com/test.php?callback=JSON_CALLBACK',
}).success(function (msg) {
console.log(data);
});
//或者
$http
.jsonp('http://www.b.com/test.php?callback=JSON_CALLBACK')
.success(function (msg){
console.log(msg);
}); 
}]);
</script>
</head>
<body>
</body>
</html>

我們看到,這里是直接以jsonp的形式進行跨域請求的,其操作同jquery中對跨域的請求方式如出一轍。注意,我們的callback是固定的,即JSON_CALLBACK,盡量不要去做任何改動

我們再看服務端b.com中的test.php對請求數(shù)據(jù)的處理方式,這里以原生php的方式做參考

$callBack = isset($_GET['callback']) ? $_GET['callback'] : DEFAULT_CALLBACK;
exit($callBack.'('.json_encode($data).')');

我們再回來看看客戶端console.log記錄的結(jié)果

到此,也就是說我們跨域請求是成功的!

最后我們做個小總結(jié),注意下其中的重點:

1.客戶端跨域請求的url后追加的參數(shù)是?callback=JSON_CALLBACK,參數(shù)callback的值指定為JSON_CALLBACK,注意是大寫,就是JSON_CALLBACK不要作任何改動,感覺這里是個不小的坑,?callback的值稍作改動,客戶端就需要全局定義callback函數(shù),而且還特么怎么再傳給$scope處理?為了避免不必要的麻煩,這里建議就這么搞吧

2.再看服務端,服務端需要指定$callBack = $_GET['callback'];接收callback,而且你還會發(fā)現(xiàn)接收的callback不是我們客戶端寫的?callback的值,客戶端指定JSON_CALLBACK應該是為了觸發(fā)angularJs內(nèi)部的機制

相關(guān)文章

  • Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包詳解

    Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包詳解

    基于流的前端自動化構(gòu)建工具,利用gulp可以提高前端開發(fā)效率,特別是在前后端分離的項目中。下面這篇文章主要給大家介紹了關(guān)于在Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包的相關(guān)資料,需要的朋友可以參考下。
    2017-07-07
  • Angular2下使用pdf插件的方法詳解

    Angular2下使用pdf插件的方法詳解

    這篇文章主要給大家介紹了在Angular2下使用pdf插件的方法,使用這個插件是要實現(xiàn)一個pdf顯示的功能,文中介紹的非常詳細,對大家具有一定的參考價值,需要的朋友們下面來一起看看吧。
    2017-04-04
  • AngularJS對動態(tài)增加的DOM實現(xiàn)ng-keyup事件示例

    AngularJS對動態(tài)增加的DOM實現(xiàn)ng-keyup事件示例

    這篇文章主要介紹了AngularJS對動態(tài)增加的DOM實現(xiàn)ng-keyup事件示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • AngularJS路由刪除#符號解決的辦法

    AngularJS路由刪除#符號解決的辦法

    這篇文章主要介紹了AngularJS路由刪除#符號解決的辦法的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下
    2017-09-09
  • Angular.js ng-file-upload結(jié)合springMVC的使用教程

    Angular.js ng-file-upload結(jié)合springMVC的使用教程

    這篇文章主要給大家介紹了關(guān)于Angular.js文件上傳控件ng-file-upload結(jié)合springMVC的使用教程,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。
    2017-07-07
  • 詳解angular element()方法使用

    詳解angular element()方法使用

    本篇文章主要介紹了詳解angular element()方法使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-04
  • Angular2.js實現(xiàn)表單驗證詳解

    Angular2.js實現(xiàn)表單驗證詳解

    這篇文章主要介紹了Angular2.js實現(xiàn)表單驗證的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • angularjs+bootstrap實現(xiàn)自定義分頁的實例代碼

    angularjs+bootstrap實現(xiàn)自定義分頁的實例代碼

    本篇文章主要介紹了angularjs+bootstrap實現(xiàn)自定義分頁的實例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • AngularJS控制器controller給模型數(shù)據(jù)賦初始值的方法

    AngularJS控制器controller給模型數(shù)據(jù)賦初始值的方法

    這篇文章主要介紹了AngularJS控制器controller給模型數(shù)據(jù)賦初始值的方法,涉及AngularJS控制器controller簡單賦值操作實現(xiàn)技巧,需要的朋友可以參考下
    2017-01-01
  • 詳解Angular2響應式表單

    詳解Angular2響應式表單

    這篇文章主要介紹了詳解Angular2響應式表單,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-06-06

最新評論