這兩天接到項目，項目框架是同事已經搭到的，大概看了一下悟泵，用的是AngularJS框架图柏，表示沒用過，臨時看了一下文檔报破，還好文檔通俗易懂悠就，整體不是很難，大概算是有個了解充易。
附上教程地址：AngularJS教程
好了理卑，下面說正事，由于項目需求蔽氨，整個項目都是調用的Api藐唠，那么問題來了帆疟，MVC WebApi也是同事搭的，但是并沒有考慮到跨域問題宇立，所有Api在一個項目里面單獨存在踪宠，A項目要用js訪問Api的接口，所以項目開始之前的第一個問題來了妈嘹，跨域柳琢。
剛開始先用了JQuery Ajax來調用接口，OK润脸，訪問成功了柬脸，欣喜之余發(fā)現(xiàn)了一個小bug，就是在數(shù)據(jù)返回成功后不能及時刷新毙驯，對于我這樣js入門級別的小菜鳥來說倒堕，一臉懵逼。
頁面代碼
<div ng-app="myApp" ng-controller="getCity">
<select ng-model="selectedSite" ng-options="x.city for x in selectedModel"></select>
你選擇的是: {{selectedSite.city}}
編號為: {{selectedSite.cityid}}
提示信息 {{msg}}
</div>
Controller（js）代碼
var MyApp = angular.module("myApp", []);
MyApp.controller('getCity', function ($scope, $http) {
$.ajax({
type: "get",
url: "http://localhost:8000/api/Account/City",
dataType: "jsonp",
data: {},
success: function (data, status) {
$scope.selectedModel = data.AppendData;
$scope.msg = data.Message;
},
error: function (e) {
},
complete: function () {
}
});
//$http.jsonp("http://localhost:8000/api/Account/City?callback=JSON_CALLBACK")
//.success(function (response) {
// $scope.selectedModel = response.AppendData;
// $scope.msg = response.Message;
//});
});
現(xiàn)在就已經看到問題了吧爆价，Ajax調用接口成功了垦巴，但是頁面卻沒有更新數(shù)據(jù)，這就很難受了骤宣，好吧序愚，放棄爸吮，不糾結了，還是去看看AngularJS的HTTP吧
附上PHP Ajax 跨域問題最佳解決方案
用PHP的朋友可以看看蔗候，我們繼續(xù)
AngularJS實現(xiàn)跨域的幾種方法
文檔里面也介紹了锈遥，我沒有猶豫所灸，還是選擇使用JSONP爬立。
$http.jsonp("http://localhost/sitesettings/getBadgeInfo.pt?jsonp=JSON_CALLBACK&siteid=137bd406").success(function(data){ ... });
// The name of the callback should be the string JSON_CALLBACK.
以上是文檔介紹的方法侠驯，我試了一下，訪問成功了儒士，但是返回的數(shù)據(jù)不會着撩，大家都知道的匾委，使用jsonp訪問api要返回指定格式的數(shù)據(jù)赂乐，這里不多說沪猴，下面配圖运嗜，然后現(xiàn)在的問題就是担租，雖然訪問成功了奋救，但是返回的數(shù)據(jù)卻是json類型尝艘，js報錯
走到這里其實就已經很簡單了背亥，我去api項目里面看了一下后臺的配置狡汉，發(fā)現(xiàn)這樣訪問是進不到配置的設置里面的盾戴，參數(shù)不對尖啡，我就做了一些調整
var MyApp = angular.module("myApp", []);
MyApp.controller('getCity', function ($scope, $http) {
$http.jsonp("http://localhost:8000/api/Account/City?callback=JSON_CALLBACK")
.success(function (response) {
$scope.selectedModel = response.AppendData;
$scope.msg = response.Message;
});
});
把jsonp=...換成我在后臺配置的參數(shù)
好吧可婶，問題解決了矛渴，看到這里我想很多人想對我說一句第四音的：“臥槽！”
其實我的內心也是這樣想的下面我配上MVC WebApi后臺支持跨域的代碼跟jsonp返回數(shù)據(jù)格式的截圖：
這里是用AngularJs返回的，Ajax跟這個返回也是不一樣的揖铜，有興趣的可以去上面配圖里面找找看达皿。
