深入理解Angularjs中$http.post与$.邮政

摘要

在angularjs发送邮政请求的时候，确实很困惑，在传递json数据的时候，总会遇到在服务端无法接受到参数的情况，这里有必要与$.邮政进行比较学习一下。

一个例子

这里模拟登录的一个场景，邮政用户名与密码，服务端接受账户并直接返回到客户端不做其它业务处理。

使用angularjs版本

/* AngularJS v 1。2 .15(c)2010-2014年谷歌公司http://angularjs.org许可证： MIT */服务端

公共类帐户控制器：控制器{//GET:/控制器/公共IActionResult log in(){ return View()；}[httpset]public IActionResult登录(字符串用户名，字符串用户Pwd){ var结果=请求.形式；返回Json(new { _code=200，_msg='登录成功'，name=userName，password=userPwd })；} }$.邮政

首先使用$.邮政的方式，直接提交账户密码

$.帖子(' @ Url .内容(' ~/帐户/登录')'，{用户名： '2342342 '，用户密码2sssdfs ' }，函数（数据){ console.log(数据);});响应

这里我们看一下请求体

那么我们现在看看angularjs的$http.post的情况，到底区别在哪儿？

@ { Layout=null}！DOCTYPE html html ng-app=' log in ' head meta name=' viewport ' content=' width=device-width，initial-scale=1.0'/titleIT怪O用户登录/title link href=' ~/lib/bootstrap/dist/CSS/bootstrap。CSS“rel=”外部no跟随“rel=”样式表'/脚本src=' http : ~/js/angular。量滴js /脚本angular.module('login '，[]).控制器('登录控制器'，函数($http，$scope) { $scope .log in=function(){ var data={ username : $ scope。username，userpwd : $作用域。user pwd }；var config={ headers : { ' Content-Type ' : ' application/x-www-form-URL encoded ' }，//transform request : function(obj){//var str=[]；//for(var p in obj){//str。push(encodeURIComponent(p)'=' encodeURIComponent(obj[p])；//} //返回字符串。联接(" ")；//} };console.log(数据);$http.post('@Url .内容(' ~/帐户/登录')',数据，配置)。成功（函数（数据){ console.log(数据));});};});/script/head body div-controller=' LoginController '输入类型=“文本”占位符='用户名ng-model='用户名'值='' /输入类型='密码'占位符='密码ng-model=' userPwd ' value=' '/button ng-click=' log in()'登录/button /div/body/html登录

出现了，处于习惯的原因，平时就会这样来写$http.post的。但结果并不是想要的。那么咱们与$.邮政对比一下请求体。

看到没？差别就在这里。

发现问题了，那么我们就要转化为$.邮政提交参数的方式。幸好，angularjs中$http.post提供了一个转化参数的transformRequest方法，可以在配置中加上该参数：

var config={ headers : { ' Content-Type ' : ' application/x-www-form-URL编码' }，transformRequest:函数(obj){ var str=[]；for(obj中的var p){ str。push(encodeURIComponent(p)'=' encodeURIComponent(obj[p])；}返回字符串。联接(" ")；} };它的作用就是将提交的参数转化为$.邮政提交参数的方式。这样看到的请求体中参数就与$.邮政相同了。

可以在全局进行设置

编写角度模块脚本('登录'，[]).控制器('登录控制器'，函数($http，$scope) { $scope .log in=function(){ var data={ username : $ scope。username，userpwd : $作用域。user pwd }；console.log(数据);$http.post('@Url .内容(' ~/账号/登录')',数据)。成功（函数（数据){ console.log(数据));});};}).config(函数($ http provider){ $ http provider。默认值。transform request=function(obj){ var str=[]；for(obj中的var p){ str。push(encodeURIComponent(p)'=' encodeURIComponent(obj[p])；}返回字符串。联接(" ")；};$ httprovider。默认值。标题。post[' Content-Type ']=' application/x-www-form-URL编码；charset=utf-8 '；});/script总结

angularjs在进行邮政请求的时候要进行参数配置。关于angularjs的邮政请求，建议在初始化模块的时候对邮政请求设置请求头与请求参数转换的设置，这样可以在其他地方方便使用。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。