這兩天接到項目，項目框架是同事已經搭到的，大概看了一下，用的是AngularJS框架，表示沒用過，臨時看了一下文檔，還好文檔通俗易懂，整體不是很難，大概算是有個了解。
附上教程地址：AngularJS教程
好了，下面說正事，由于項目需求，整個項目都是調用的Api，那么問題來了，MVC WebApi也是同事搭的，但是并沒有考慮到跨域問題，所有Api在一個項目里面單獨存在，A項目要用js訪問Api的接口，所以項目開始之前的第一個問題來了，跨域。
剛開始先用了JQuery Ajax來調用接口，OK，訪問成功了，欣喜之余發現了一個小bug，就是在數據返回成功后不能及時刷新，對于我這樣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;
//});
});
現在就已經看到問題了吧，Ajax調用接口成功了，但是頁面卻沒有更新數據，這就很難受了，好吧，放棄，不糾結了，還是去看看AngularJS的HTTP吧
附上PHP Ajax 跨域問題最佳解決方案
用PHP的朋友可以看看，我們繼續
AngularJS實現跨域的幾種方法
文檔里面也介紹了，我沒有猶豫，還是選擇使用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.
以上是文檔介紹的方法，我試了一下，訪問成功了，但是返回的數據不會，大家都知道的，使用jsonp訪問api要返回指定格式的數據，這里不多說，下面配圖，然后現在的問題就是，雖然訪問成功了，但是返回的數據卻是json類型，js報錯
走到這里其實就已經很簡單了，我去api項目里面看了一下后臺的配置，發現這樣訪問是進不到配置的設置里面的，參數不對，我就做了一些調整
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=...換成我在后臺配置的參數
好吧，問題解決了，看到這里我想很多人想對我說一句第四音的：“臥槽！”
其實我的內心也是這樣想的下面我配上MVC WebApi后臺支持跨域的代碼跟jsonp返回數據格式的截圖：
這里是用AngularJs返回的，Ajax跟這個返回也是不一樣的，有興趣的可以去上面配圖里面找找看。
