本文转自：https://www.cnblogs.com/wolf-sun/p/6878868.html

摘要

在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="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

  • 博客地址：http://www.cnblogs.com/wolf-sun/
    博客版权:如果文中有不妥或者错误的地方还望高手的你指出，以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下！如果你有更好的建议，不如留言一起讨论，共同进步！ 再次感谢您耐心的读完本篇文章。
 
分类: [Angularjs]

[转][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

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

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

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

  6. 初探AngularJS

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

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

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

  8. 指令<AngularJs>

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

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

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

随机推荐

  1. HTML5中input标签有用的新属性

    HTML5对input增加了一些新标签,个人觉得比较常用有效的以下几个 placeholder=“请输入” 常见用于默认提示 autofocus 自动聚焦到当前输入框 maxlength=" ...

  2. 2000 ASCII码排序

    声明:从今天开始每周至少做七道杭电ACM题,锻炼思考能力. 2000  ASCII码排序 Problem Description 输入三个字符后,按各字符的ASCII码从小到大的顺序输出这三个字符. ...

  3. JAVA的 IO NIO AIO笔记

        IO      linux内核将所有外部设备都看做一个文件来操作,对一个文件的读写会调用内核系统命令,放回一个file descriptor(文件描述符), 对一个socket的读写也会有相应 ...

  4. 闵可夫斯基和（Mincowsky sum）

    一.概述 官方定义:两个图形A,B的闵可夫斯基和C={a+b|a∈A,b∈B}通俗一点:从原点向图形A内部的每一个点做向量,将图形B沿每个向量移动,所有的最终位置的并便是闵可夫斯基和(具有交换律) 例 ...

  5. Settings 参数记录

    DOWNLOAD_FAIL_ON_DATALOSS : 参数:TRUE.FALSE 如果设置为 True : scrapy.Request 有一个 errback 参数, 当 Request 请求出错 ...

  6. 解决weblogic 部署环境后出现的乱码问题

    1.在startWebloci.cmd 中 set CLASSPATH=%SAVE_CLASSPATH% 下增加一行 JAVA_OPTIONS="${JAVA_OPTIONS} -Dfile ...

  7. 【.NET Core项目实战-统一认证平台】第一章 功能及架构分析

    [.NET Core项目实战-统一认证平台]开篇及目录索引 从本文开始,我们正式进入项目研发阶段,首先我们分析下统一认证平台应该具备哪些功能性需求和非功能性需求,在梳理完这些需求后,设计好系统采用的架 ...

  8. 理解 Linux 的虚拟内存

    前言 前不久组内又有一次我比较期待的分享:”Linux 的虚拟内存”.是某天晚上加班时,我们讨论虚拟内存的概念时,leader 发现几位同事对虚拟内存认识不清后,特意给这位同学挑选的主题(笑). 我之 ...

  9. java,让debug出色

    虽然我们不喜欢bug,但是bug永远都存在.虽然我们牛逼,但是仍然有不知道的东西,解决不了的问题.so,还得借助工具,让咱效率提起来扛扛的.解决的问题如是:由于某种原因,其他系统发送的mq,我这边说没 ...

  10. Robot Framework - 4 - 创建和扩展测试库的示例

    创建和扩展Library的示例 示例:Check status on Linux OS 创建与使用library的基本步骤:           1--- library实现的内容和实现的方式     ...