摘要

在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请求设置请求头与请求参数转换的设置，这样可以在其他地方方便使用。

参考

http://stackoverflow.com/questions/12190166/angularjs-any-way-for-http-post-to-send-request-parameters-instead-of-json

[Angularjs]$http.post与$.post的更多相关文章

  1. 【js类库AngularJs】web前端的mvc框架angularjs之hello world

    AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核 ...

  2. JS框架~Angularjs

    无意中看到anytao的项目,工作台,使用了Angularjs框架,感觉在前端表现上用户体验比较好,于是就简单看了一下,原来使用很简单,或者说,人家把代码封装的很好,以至于开发人员调用时比较简单,呵呵 ...

  3. 转载：温故而知新 - AngularJS 1.x

    原文: http://geek.csdn.net/news/detail/102405 温故而知新 - AngularJS 1.x

  4. [转][Angularjs]$http.post与$.post

    本文转自:https://www.cnblogs.com/wolf-sun/p/6878868.html 摘要 在angularjs发送post请求的时候,确实很困惑,在传递json数据的时候,总会遇 ...

  5. 一篇入门AngularJS

    目录 1.AngularJS 应用 2.AngularJS 指令 3.AngularJS 表达式 4.AngularJS 模型 5.AngularJS 控制器 6.AngularJS 作用域 7.An ...

  6. 玩转spring boot——结合jQuery和AngularJs

    在上篇的基础上 准备工作: 修改pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

  7. 初探AngularJS

    一.前言 早已听说AngularJS的大名,并在很久前也编写过些小demo,但是都没有系统学习过.由于,在下个版本项目中用到了AngularJS,so,那就一起再来研究研究呗. 说到,这个Angula ...

  8. 摆脱DOM操作，从TodoMVC看angularJS

    取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...

  9. 指令<AngularJs>

    对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 首先来看个完整的参数示例再来详细的介绍各个参数的作用及用法: angular.module('myApp', ...

  10. ng1.3+表单验证<AngularJs>

    前一篇文章说过,ng1.3+以后对于表单验证有了优化,它不再需要一个详细的表达式状态创建元素显示或隐藏. 例如:我们在ng1.3之前的版本都需要如下写法: <div class="er ...

随机推荐

  1. python操作数据库之批量导入

    python操作数据库之批量导入 Python语法简洁清晰,特色之一是强制用空白符(white space)作为语句缩进. Python具有丰富和强大的库.它常被昵称为胶水语言,能够把用其他语言制作的 ...

  2. POPTEST老李谈Debug和Release的区别（c#）2

    二.哪些情况下 Release 版会出错 有了上面的介绍,我们再来逐个对照这些选项看看 Release 版错误是怎样产生的 1. Runtime Library: 2. 优化:这类错误主要有以下几种: ...

  3. canvas画布

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. Android自定义ListView的Item无法响应OnItemClick的解决办法(转)

    原文链接:http://www.linuxidc.com/Linux/2011-09/43205.htm 如果你的自定义ListViewItem中有Button或者Checkable的子类控件的话,那 ...

  5. (iOS)关于UITableView设置contentsize（原创）

    由于UITableView是继承自UIScrollView的,所以他是可以设置contentsize的. 但是,我在试验的过程中,初始化UITableView实例后,直接设置它的contentsize ...

  6. mock.js-无需等待，随机产生数据，让前端独立于后端进行开发

    mock.js所做的 基于 数据模板 生成模拟数据. 基于 HTML模板 生成模拟数据. 拦截并模拟 ajax 请求. Mock.js官方网址:http://mockjs.com/ 1.Mock.js ...

  7. JavaScript学习总结（一）DOM文档对象模型

    一.文档(D) 一个网页运行在浏览器中,他就是一个文档对象. 二.对象(O) "对象"是一种自足的数据集合.与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个对象调用的函 ...

  8. 什么是javascript的回调函数？

    回调函数(callback) 基本上每本书里都会提一提实际上我们几乎每天都在用回调函数,那么如果问你到底什么是回调函数呢? 1. 回调函数是作为参数传递给另一个函数 2. 函数运行到某种程度时,执行回 ...

  9. Windows 解决mysql忘记密码怎么办？

    MySQL有时候忘记密码了怎么办?我给出案例和说明!一下就解决了! Windows下的实际操作如下 1.关闭正在运行的MySQL. 2.打开DOS窗口,转到mysql\bin目录. 3.输入mysql ...

  10. 初识JS

    今儿我遇到一特别恐怖的事儿,JS 刚开始的我看到JS感觉是懵逼的,翻开第一页,感觉是棒棒哒,再看第二页,感觉是easy的,看到第三页是恐怖的,当看到的第四页的时候,我感觉今年的清明节是为我准备的 废话 ...