深入理解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 = 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请求设置请求头与请求参数转换的设置，这样可以在其他地方方便使用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
angularJS 发起$http.post和$http.get请求的实现方法
AngularJS发起$http.post请求 代码如下: $http({ method:'post', url:'post.php', data:{name:"aaa",id:1,age:20} }).success(function(req){ console.log(req); }) 这时候你会发现收不到返回的数据,结果为null,这是因为要转换成form data. 解决方案: 配置$httpProvider: var myApp = angular.module('app',
-
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
1.问题: 后端接收不到AngularJs中$http.post发送的数据,总是显示为null 示例代码: $http.post(/admin/KeyValue/GetListByPage, { pageindex: 1, pagesize: 8 }) .success(function(){ alert("Mr靖"); }); 代码没有错,但是在后台却接收不到数据,这是为什么呢? 用火狐监控:参数是JSON格式 用谷歌监控:传参方式是request payload 可以发现传参方式是
-
对比分析AngularJS中的$http.post与jQuery.post的区别
很多时候我们需要用ajax提交post数据,angularjs与jq类似,也有封装好的post. 但是jQuery的post明显比angularjs的要简单一些,人性化一些. AngularJS: 复制代码 代码如下: $http.post('do-submit.php',myData) .success(function(){ // some code }); jQuery: 复制代码 代码如下: $.post('do-submit.php', myData, function() {
-
AngularJS封装$http.post()实例详解
AngularJS封装$http.post()实例详解 用了不是很长的时间跟了一个移动APP项目,用的是ionic + AngularJS + cordova框架,其间遇到过挺多问题,其中一个就是对Ajax的封装问题. 其实针对封装问题一直以来就没停止过谈论,不同的项目也有不同的需求,举个典型的例子,我在做这个项目的时候因为一开始没有考虑封装问题所以被批评了,而我的一个朋友却因为封装了受到了批评--很尴尬不是么. 那么对于是否要封装这个问题,究竟该怎么界定?其实这不是一个很复杂的问题,归根到
-
Angularjs中$http以post请求通过消息体传递参数的实现方法
本文实例讲述了Angularjs中$http以post请求通过消息体传递参数的方法.分享给大家供大家参考,具体如下: Angularjs中,$http以post在消息体中传递参数,需要做以下修改,以确保消息体传递参数的正确性. 一.在声明应用的时候进行设置: var httpPost = function($httpProvider) { /******************************************* 说明:$http的post提交时,纠正消息体 ***********
-
AngularJS $http模块POST请求实现
一.代码如下: $http({ method:'post', url:'post.php', data:{name:"aaa",id:1,age:20} }).success(function(req){ console.log(req); }) 解决方案: 1. var myApp = angular.module('app',[]); myApp.config(function($httpProvider){ $httpProvider.defaults.transformRequ
-
深入理解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 c
-
深入理解AngularJs－scope的脏检查（一）
进入正文前的说明:本文中的示例代码并非AngularJs源码,而是来自书籍<<Build Your Own AngularJs>>, 这本书的作者仅依赖jquery和lodash一步一步构建出AngularJs的各核心模块,对全面理解AngularJs有非常巨大的帮助.若有正在使用AngulaJs攻城拔寨并且希望完全掌握手中武器的小伙伴,相信能对你理解AngularJs带来莫大帮助,感谢作者. 在这篇文章中,希望能让您理清楚以下几项与scope相关的功能: 1.dirty-chec
-
深入理解angularjs过滤器
•在html文件中和在js文件中使用 $scope.form_time = $filter('date')($scope.time, 'yyyy-MM-dd HH:mm:ss'); <p>{{time | date: 'yyyy-MM-dd HH:mm:ss'}}</p> •内部过滤器和自定义过滤器 .filter('my_data_format',[function(){ return function(data,str,sss){ console.log('data: ',da
-
理解AngularJs篇：30分钟快速掌握AngularJs
一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用程序.在开始使用AngularJs开发SPA之前,我觉得有必要详细介绍下AngularJs所涉及的知识点.所有也就有了这篇文章. 二.AngularJs介绍 AngularJS是Google推出的一款Web应用开发框架.它提供了一系列兼容性良好并可扩展的服务,包括数据绑定.DOM操作.MVC和依赖注
-
深入理解AngularJS中的ng-bind-html指令和$sce服务
前言 Angularjs的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model. 但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签. 如: $scope.currentWork.description = "hello,<br><b>今天我们去哪里?</b>" 我们用ng-bind-html这样的指令来绑定,结果却不是我们想要的. 是这样的 hello,
-
理解AngularJs指令
对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 首先来看个完整的参数示例再来详细的介绍各个参数的作用及用法: angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priority: Number, terminal: Boolean, template: String or Template Function: func
-
深入理解AngularJS中的ng-bind-html指令
前言 在为html标签绑定数据的时,如果绑定的内容是纯文本,你可以使用{{}}或者ng-bind.但在为html标签绑定带html标签的内容的时候,angularjs为了安全考虑,不会将其渲染成html,而是将其当做文本直接在页面上展示. 先来看一个例子 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Conten
-
深入理解javascript中的 “this”
一.前言: 我们知道 "this" 是javascript语言的一个关键字,在编写javascript代码的时候,经常会见到或者用到它. 但是,有一部分开发朋友,对 "this" 一知半解,下面我们就一起来探讨学习下javascript中 "this" 的具体含义吧! 二.This总结: This指针作用域: 1).在全局执行环境中使用this,表示Global对象,在浏览器中就是window对象. 2).当在函数执行环境中使用this时,情况就
-
深入理解Angularjs中的$resource服务
一.$resource服务介绍 $http服务提供的实现极为简单和低级,可以用来发送XHR请求,同时它还为你提供了很大的可控性和灵活性.但是,在大多数情况下,我们需要处理对象,以及封装了特定属性和方法的对象模型,例如一个person对象(带有详细信息),或者一个信用卡对象. $resource就是为这一功能而设计的.AngularJS中的resource(资源)允许我们用描述性的方式来定义对象模型,它可以描述以下内容: 资源在服务端的URL. 常用的请求参数类型. 一些附加的方法(你可以自动获得
-
深入理解Angularjs 脏值检测
构建自己的AngularJS,第一部分:Scope和Digest Angular是一个成熟和强大的JavaScript框架.它也是一个比较庞大的框架,在熟练掌握之前,需要领会它提出的很多新概念.很多Web开发人员涌向Angular,有不少人面临同样的障碍.Digest到底是怎么做的?定义一个指令(directive)有哪些不同的方法?Service和provider有什么区别? Angular的文档挺不错的,第三方的资源也越来越丰富,想要学习一门新的技术,没什么方法比把它拆开研究其运作机制更好.