angularjs方式的get与post分析

来源：互联网发布：电脑培训软件机构咨询编辑：程序博客网时间：2024/06/10 11:38

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变量，通过scope.num可以访问到；（3）con1.js这是前端处理的核心文件，这里的核心是angularjs的http的post方法有一个问题，就是

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

阅读全文

0 0