[Angularjs]$http.post与$.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 = , _msg = "Login success", name = userName, password = userPwd });
}
}
$.post
首先使用$.post的方式，直接提交账户密码
$.post("@Url.Content("~/Account/Login")",{ userName: "", 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="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请求设置请求头与请求参数转换的设置，这样可以在其他地方方便使用。
参考
[Angularjs]$http.post与$.post的更多相关文章
- 【js类库AngularJs】web前端的mvc框架angularjs之hello world
AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核 ...
- JS框架~Angularjs
无意中看到anytao的项目,工作台,使用了Angularjs框架,感觉在前端表现上用户体验比较好,于是就简单看了一下,原来使用很简单,或者说,人家把代码封装的很好,以至于开发人员调用时比较简单,呵呵 ...
- 转载：温故而知新 - AngularJS 1.x
原文: http://geek.csdn.net/news/detail/102405 温故而知新 - AngularJS 1.x
- [转][Angularjs]$http.post与$.post
本文转自:https://www.cnblogs.com/wolf-sun/p/6878868.html 摘要 在angularjs发送post请求的时候,确实很困惑,在传递json数据的时候,总会遇 ...
- 一篇入门AngularJS
目录 1.AngularJS 应用 2.AngularJS 指令 3.AngularJS 表达式 4.AngularJS 模型 5.AngularJS 控制器 6.AngularJS 作用域 7.An ...
- 玩转spring boot——结合jQuery和AngularJs
在上篇的基础上 准备工作: 修改pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...
- 初探AngularJS
一.前言 早已听说AngularJS的大名,并在很久前也编写过些小demo,但是都没有系统学习过.由于,在下个版本项目中用到了AngularJS,so,那就一起再来研究研究呗. 说到,这个Angula ...
- 摆脱DOM操作，从TodoMVC看angularJS
取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...
- 指令<AngularJs>
对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 首先来看个完整的参数示例再来详细的介绍各个参数的作用及用法: angular.module('myApp', ...
- ng1.3+表单验证<AngularJs>
前一篇文章说过,ng1.3+以后对于表单验证有了优化,它不再需要一个详细的表达式状态创建元素显示或隐藏. 例如:我们在ng1.3之前的版本都需要如下写法: <div class="er ...
随机推荐
- 老李分享：持续集成学好jenkins之Git和Maven配置
老李分享:持续集成学好jenkins之Git和Maven配置 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣 ...
- Selenium测试专项三班隆重开班
Selenium测试专项三班隆重开班 应广大测试技术人员要求,以及企业技术需求.Selenium提前一周开课了,只针对合作的每家企业提供1-2个参训名额.预计培训60人次.但报名人数却远远超出我们预期 ...
- AngularJS1.X学习笔记2-数据绑定
上一篇从整体上认识了Angular,从现在开始更加深入的学习Angular的特性.本次学习的是数据绑定.应该所有的MVC框架都会用到数据绑定,比如我所知道的ThinkPHP.struts等,只有实现了 ...
- sublime Text3快捷键使用大全
Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本.Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑.举个栗子:快速选中并更改所有相同的变量名.函数名等.Ct ...
- matlab 2016a破解中文版安装教程
之前电脑重装过,所以要重新安装一个matlab,在大三的时候学过matlab,信息老师给的安装包,但是不知道放哪里去了,记忆力不好,找了些网上的教程和下载地址,真的是坑,一些都是不行的,在这里记录下m ...
- SDRAM notebook
/*******************************************************************************/ chapter one * SDR ...
- ios UICollectionView简单说明
原谅我记不住写下来好了 UICollectionViewFlowLayout 流式自动布局 继承于UICollectionViewLayout 初始化:[[UICollectionViewFlowLa ...
- yii2 advance安装
转载自:http://www.genshuixue.com/i-cxy/p/7986531 1. 前提条件,php版本得> 5.4D:\phpStudy>php -v PHP 5.5.17 ...
- jquery控制图片切换
这种js现在用的很多.同时网上的js代码页很多.我直接从网上当了一个来用:代码如下: html <div class="bannerbox"> ...
- webapp 1px显示两倍的问题
公司最近换新首页,按照设计师的要求<大家都在逛>的分割线要1个像素. .span-3{ width:33.3333%; &:not(:first-child){ &:bef ...