每次在學新的前端框架，最痛苦的就是ajax的部分，總是try好久，資料才能正確拋回前端，沒想到AngularJS也不例外，
不過這次是AngularJS的bug，不是我的問題 
原程式如下，簡單來說，就是透過controller到後端撈資料，再將資料放入moudle透過ng-repeat指令輪詢 li tag展示出來。
看似沒問題的一段code，是的!我也沒寫錯，但回傳的資料格式永遠是xml，而不是我定義的json。
但明明我有為headers屬性，指定一個'Content-Type':'application/json'的物件了，難不成XMLHttpRequest物件並沒有把這個header給傳給後端嗎?
於是追到Angular.js看原始碼，果真不知為何，Content-Type並沒發給後端的WebService，所以WebService以SOAP預設的XML格式回傳了。
於是直覺的是header的宣告出了問題，死馬當活馬醫的把Content-Type改成Content-type，居然正常回傳json資料回前端了。
<head runat="server">
<!--[if lte IE 8]>
<script src="http://cdnjs.cloudflare.com/ajax/libs/json3/3.2.4/json3.min.js"></script>
<![endif]-->
<title></title>
<script src="Scripts/angular.js" type="text/javascript"></script>
<script type="text/javascript">
function myCtrl($scope, $http) {
$http({
method: 'POST',
url: 'WebService.asmx/getdata',
headers: {
'Content-Type': 'application/json'
}
}).success(function(data) {
$scope.peoples = JSON.parse(data.d);
})
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-controller="myCtrl">
<div>共{{peoples.length}}筆資料</div>
<ul>
<li ng-repeat="people in peoples">
<p>
{{people.name}}
</p>
</li>
</ul>
</div>
</form>
</body>
</html>
再測試另一種寫法，把$http那段改寫成以下方式:
$http.post('WebService.asmx/getdata', { 'Content-type': 'application/json' }).success(function (data) {
$scope.peoples = JSON.parse(data.d);
})
而本日主角Content-type中的type，無論是大寫的T，還是小寫的t都能正常接收json。看來以post方式寫比較安全些，也結束了一整天的鬼打牆。
留言列表
前端網頁相關技術 (5)
