1.概述
本文主要是記錄angularjs方式處理get與post的處理技巧，angularjs在這方面有一些坑，需要記錄以防之後掉入。
另外，還有後端的處理方式，後端獲取外界數據，根據前端post參數發送給前端所需數據這一過程的實現。
2.具體代碼與效果
項目以nodejs搭建，express處理靜態文件，結構如下：
bilibili.json 文件是一個json文件之後在後端會進行讀取（直接訪問如下地址http://bangumi.bilibili.com/jsonp/timeline_v2.ver?callback=timeline 保存頁面爲bilibili.json即可）；
server.js爲項目入口文件，index.html爲主頁。
（1）server.js
var express = require('express')
var path = require('path')
var fs = require('fs')
var bodyParser = require("body-parser")
//body-parser用於get post 相關處理
var app = express()
app.use(bodyParser.urlencoded({extended:true}))
var mydata={};
fs.readFile('./public/bilibili.json','utf-8',function(err,data){
data=JSON.parse(data); //parse json into Object
if(err){console.log(err)}
console.log(data.list.length); //73
mydata=data;
});
app.use(express.static(path.join(__dirname, 'public')));
//返回所有屬性的值
function mysend(x){
var t='';
for (var y in x){
t+=y+':'+x[y]+'\n';
}
return t;
}
app.post('/test',function(req,res){
console.log(req.body.order);
var order=req.body.order;
res.send(mysend(mydata.list[order])+'');
});
app.listen(3000);(2)index.html
<!DOCTYPE html>
<html ng-app='myapp'>
<head>
<title>bilibili——test</title>
<base href="/">
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<div ng-controller='con1'>
<div>
<form onsubmit="return false">
<input type="number" ng-model='num'>
<input type="submit" ng-click='get()'>
</form>
</div>
<div>{{response}}</div>
<button ng-click='flush()'>刷新</button>
</div>
</body>
<script src='angular.min.js'></script>
<script src='app.js'></script>
<script src="con1.js"></script>
</html>(3)app.js //此文件用於配置，本項目中沒有作用 可刪
angular.module('myapp',[])
.config(function(){
}
);
（4）con1.js //angularjs的controller文件
angular.module('myapp')
.controller('con1',function($scope,$window,$http){
$scope.number=0;
postCfg = {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
transformRequest: function(obj) {
var str = [];
for (var s in obj) {
str.push(encodeURIComponent(s) + "=" + encodeURIComponent(obj[s]));
}
return str.join("&");
}
};
$scope.flush= function(){
$http.post('http://localhost:3000/test',{order:$scope.number},postCfg).success(function(data){
console.log('data:'+ data);
$scope.response=data;
});
};
$scope.get=function(){
$scope.number=$scope.num;
$scope.flush();
}
});最終效果就是在http://localhost:3000端口訪問，頁面中input輸入框輸入0~72的一個數字提交就可以獲取json文件中相應的對象。
3.代碼分析
(1)server.js文件是後端處理的文件，包含express模塊、fs模塊、body-parser模塊。使用express模塊時候，默認主頁文件就是index.html 文件名必須是這個，或者重新設定路由。
app.use(express.static(path.join(__dirname, ‘public’)));這段代碼把public文件夾設定爲靜態文件夾。
body-parser模塊作用：
代碼app.use(bodyParser.urlencoded({extended:true}))；
bodyParser.urlencoded則是用來解析我們通常的form表單提交的數據，也就是請求頭中包含這樣的信息： Content-Type: application/x-www-form-urlencoded；這裏設定使用form-data方式，是因爲我們後面會把前端post參數處理爲form-data; extend ture->使用queryString庫（默認） false->使用qs庫。 這裏選擇true 是因爲我們需要在後端app.post中使用request.body方式讀取參數（前後端對應）。
body-parser參考網頁：
http://www.cnblogs.com/lianer/p/5178693.html
server.js主要功能還是在於app.post這個語句，經過body-parser設定，我們會使用form-data方式，以req.body.id方式讀取參數：
app.post(‘/test’,function(req,res){
console.log(req.body.order);
var order=req.body.order;
res.send(mysend(mydata.list[order])+”);
});
然後res.send（）方式把根據order參數選擇出來的list中的某一個對象使用mysend()函數處理成字符串傳給前端，注意這裏不能直接把mydata.list[order])傳給前端，對象不可以這樣傳遞，只能傳遞數字和字符串（或者json字符串）。如果傳遞對象前端會接受到一個無法顯示內容的結果。
另外，對於json的操作：
data=JSON.parse(data);把json解析爲一個對象；
對象中遍歷每個key:value 方式：
var t=”;
for (var y in x){
t+=y+’:’+x[y]+’\n’;
}
return t;
其中y in jsonObj 則y就是對象中的每一個key值，然後jsonObj[y]就得到此key對應的內容。這就是對象如何遍歷如何獲取每一個值。
（2）index.html
大部分都是angularjs的內容，核心是把input中的內容綁定到num變量，通過
$http.post(url,{id:value},option).success(function(data){}這樣的post請求過程中，參數{id:value}會以奇怪的格式傳送，而且在不同瀏覽器還不一樣，所以需要進行配置。其中postCfg 是option配置對象，headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded’ }, 設定傳遞頭爲普通方式，後邊的 transformRequest我不是很瞭解，功能是對參數進行序列化，經過這些處理{order:$scope.number}就會以普通form-data方式傳遞到後端然後後端以req.body.order就可以獲取到參數。而且在success()中得到的數據data就是之後服務端發回來的根據order選擇的數據，然後將其顯示出來即可。
3.總結
本文重點就是使用nodejs與angularjs進行post方式的數據傳遞的處理，有一些小坑。另外我之所以沒有對那個json網址api在後端讀取，是因爲對方似乎不允許跨域，我試了一下午，jsonp以及cors這些跨域手段嘗試無果，學長說應該是服務器就不允許跨域，我不可能訪問到的。我查了一下，都是關於服務器如何設置get post的header，配置允許跨域請求的，所以完全可以設置不允許跨域請求，而且大部分都是不允許跨域請求的。