深入理解Angularjs中$http.post与$.post
程序员文章站
2022-03-20 15:01:34
摘要
在angularjs发送post请求的时候,确实很困惑,在传递json数据的时候,总会遇到在服务端无法接受到参数的情况,这里有必要与$.post进行比较学习一下。...
摘要
在angularjs发送post请求的时候,确实很困惑,在传递json数据的时候,总会遇到在服务端无法接受到参数的情况,这里有必要与$.post进行比较学习一下。
一个例子
这里模拟登录的一个场景,post用户名与密码,服务端接受账户并直接返回到客户端不做其它业务处理。
使用angularjs版本
/* angularjs v1.2.15 (c) 2010-2014 google, inc. http://angularjs.org license: mit */
服务端
public class accountcontroller : controller { // get: /<controller>/ public iactionresult login() { return view(); } [httppost] public iactionresult login(string username,string userpwd) { var resut = request.form; return json(new { _code = 200, _msg = "login success", name = username, password = userpwd }); } }
$.post
首先使用$.post的方式,直接提交账户密码
$.post("@url.content("~/account/login")",{ username: "2342342", userpwd:"2sssdfs" },function (data) { console.log(data); });
响应
这里我们看一下请求体
那么我们现在看看angularjs的$http.post的情况,到底区别在哪儿?
@{ layout = null; } <!doctype html> <html ng-app="login"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>it怪o 用户登录</title> <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="external nofollow" rel="stylesheet" /> <script src="~/js/angular.min.js"></script> <script> angular.module("login", []).controller("logincontroller", function ($http, $scope) { $scope.login = function () { var data = { username: $scope.username, userpwd: $scope.userpwd }; var config = { headers: { 'content-type': 'application/x-www-form-urlencoded' }, //transformrequest: function (obj) { // var str = []; // for (var p in obj) { // str.push(encodeuricomponent(p) + "=" + encodeuricomponent(obj[p])); // } // return str.join("&"); //} }; console.log(data); $http.post("@url.content("~/account/login")", data, config).success(function (data) { console.log(data); }); }; }); </script> </head> <body> <div ng-controller="logincontroller"> <input type="text" placeholder="用户名" ng-model="username" value="" /> <input type="password" placeholder="密码" ng-model="userpwd" value="" /> <button ng-click="login()">登录</button> </div> </body> </html>
登录
出现了,处于习惯的原因,平时就会这样来写$http.post的。但结果并不是想要的。那么咱们与$.post对比一下请求体。
看到没?差别就在这里。
发现问题了,那么我们就要转化为$.post提交参数的方式。幸好,angularjs中$http.post提供了一个转化参数的transformrequest方法,可以在config中加上该参数:
var config = { headers: { 'content-type': 'application/x-www-form-urlencoded' }, transformrequest: function (obj) { var str = []; for (var p in obj) { str.push(encodeuricomponent(p) + "=" + encodeuricomponent(obj[p])); } return str.join("&"); } };
它的作用就是将提交的参数转化为$.post提交参数的方式。这样看到的请求体中参数就与$.post相同了。
可以在全局进行设置
<script> angular.module("login", []).controller("logincontroller", function ($http, $scope) { $scope.login = function () { var data = { username: $scope.username, userpwd: $scope.userpwd }; console.log(data); $http.post("@url.content("~/account/login")", data).success(function (data) { console.log(data); }); }; }).config(function ($httpprovider) { $httpprovider.defaults.transformrequest = function (obj) { var str = []; for (var p in obj) { str.push(encodeuricomponent(p) + "=" + encodeuricomponent(obj[p])); } return str.join("&"); }; $httpprovider.defaults.headers.post['content-type'] = 'application/x-www-form-urlencoded; charset=utf-8'; }); </script>
总结
angularjs在进行post请求的时候要进行参数配置。关于angularjs的post请求,建议在初始化模块的时候对post请求设置请求头与请求参数转换的设置,这样可以在其他地方方便使用。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Git的简单理解及基础操作命令详解
下一篇: 基于angular实现三级联动的生日插件
推荐阅读
-
深入理解vue中的slot与slot-scope
-
深入理解Javascript中的valueOf与toString
-
深入理解jQuery中live与bind方法的区别
-
深入理解JavaScript中的块级作用域、私有变量与模块模式
-
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
-
javascript中闭包概念与用法深入理解
-
深入理解JavaScript编程中的同步与异步机制
-
C#中explicit与implicit的深入理解
-
深入理解vue.js中$watch的oldvalue与newValue
-
深入理解Angularjs中的$resource服务