angularjs方式的get与post分析
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，配置允许跨域请求的，所以完全可以设置不允许跨域请求，而且大部分都是不允许跨域请求的。