angularjs方式的get与post分析

最新推荐文章于 2023-11-03 11:40:55 发布

Maci_yera

最新推荐文章于 2023-11-03 11:40:55 发布

阅读量798

点赞数

本文链接：https://blog.csdn.net/Maci_yera/article/details/74898049

版权

nodejs 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

angularjs

4 篇文章 0 订阅

订阅专栏

post

1 篇文章 0 订阅

订阅专栏

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