摘要

在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. Itext中 根据html生成Word文件,包含图片

    package cn.com.wzf; import java.io.FileOutputStream; import java.io.OutputStream; import java.io.Str ...

  2. “this kernel requires an x86-64 CPU, but only detects an i686 CPU, unable to boot” 问题解决

    1. 问题描述:  在Virtual Box上安装 Ubuntu 系统时出现错误(如题),VIrtual Box 上也没有64位操作系统的选项 2.原因分析: (1) 可能 BIOS 的 Virtua ...

  3. Linux之环境变量

    1. 变量的显示与设置 显示变量 echo \(PATH</font></code><br/> 取消变量 <code><font color=&q ...

  4. java基础之类与对象1

    从学习java到现在估计都有一年了,然而在这一年里基本处于三天打鱼五天晒网,感觉自己再不做点改变就是个废人了..T - T. 趁着重新复习java的时间,也顺便用博客来记录学习的过程.好了,废话不说了 ...

  5. Spring Boot 中如何使用 Dubbo Activate 扩展点

    摘要: 原创出处 www.bysocket.com 「泥瓦匠BYSocket 」欢迎转载,保留摘要,谢谢! 『 公司的核心竞争力在于创新 – <启示录> 』 继续上一篇:< Spri ...

  6. SQL Server 死锁概念和分析

    锁的概念 锁是什么 锁是数据库中在并发操作情形下保护资源的机制.通常(具体要看锁兼容性)只有锁的拥有者才能对被锁的资源进行操作,从而保证数据一致性. 锁的概念可分为几部分 锁资源(锁住什么) 锁模式( ...

  7. 新手介绍简单一下iOS开发中几种界面传值

    首先在处理iOS-UI中,也许在很多地方需要用到两种甚至多种不同界面之间的传值,相比这也是很多iOS入门成员头疼问题,同样作为新手的我在接触这类传值时候也一脸懵然,经过一段时间的研究,对于简单的传值有 ...

  8. Android 代码库（自定义一套 Dialog通用提示框 ）

          做Android开发五年了,期间做做停停(去做后台开发,服务器管理),当回来做Android的时候,发现很生疏,好些控件以前写得很顺手,现在好像忘记些什么了,总要打开这个项目,打开那个项目 ...

  9. 前端魔法堂：解秘FOUC

    前言  对于问题多多的IE678,FOUC(flash of unstyled content)--浏览器样式闪烁是一个不可忽视的话题,但对于ever green的浏览器就不用理会了吗?下面尝试较全面 ...

  10. commitProperties方法

    自定义的组件,如果重写commitProperties方法,那么在该方法内部一定要注意super.commitProperties()的调用.