摘要

在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. 关于ng的路由的几点想法（ui-view）

    在配置路由的时候,我们可以选择ng框架自带的路由,也可以使用第三方路由插件ui-router 注意: (1)在使用angular-ui-router的时候,必须先引入angular-ui-router ...

  2. JavaWeb总结(九)—过滤器

    一.Filter简介 Web开发人员通过Filter技术,对Web服务器管理的所有Web资源:JSP.Servlet.静态文件.静态HTML等进行拦截,从而实现一些特殊的功能.例如实现URL级别的权限 ...

  3. Spring Dubbo 开发笔记（一）——概述

    概述: Spring Dubbo 是我自己写的一个基于spring-boot和dubbo,目的是使用Spring boot的风格来使用dubbo.(即可以了解Spring boot的启动过程又可以学习 ...

  4. NodeJs之http

    创建新的服务器 创建一个简单的服务 var http = require("http"); var server = http.createServer(); server.lis ...

  5. 使用Maven整合SSM总结

    项目环境: spring-4.3.7 + mybatis-3.3.0 + maven-3.3.9 + oracle11g 1. 首先使用maven引入相关依赖: pom.xml: <projec ...

  6. linux c socket笔记 -服务端

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <sys/types. ...

  7. 1.6 在WHERE子句中引用取别名的列

    如下查询,会抛出错误:mysql> select sal as salary, comm as commission from emp where salary < 5000;ERROR ...

  8. CF #365 703D. Mishka and Interesting sum

    题目描述 D. Mishka and Interesting sum的意思就是给出一个数组,以及若干询问,每次询问某个区间[L, R]之间所有出现过偶数次的数字的异或和. 这个东西乍看很像是经典问题, ...

  9. STM32学习笔记（四）——串口控制LED（中断方式）

    目录: 一.时钟使能,包括GPIO的时钟和串口的时钟使能 二.设置引脚复用映射 三.GPIO的初始化配置,注意要设置为复用模式 四.串口参数初始化配置 五.中断分组和中断优先级配置 六.设置串口中断类 ...

  10. webrtc学习笔记2（Android端demo代码结构）

    最近正在修改webrtc的Android端demo和服务器交互的内容,介绍一下demo的大体结构吧,以便能快速回忆. 环境:Android5.0以上.libjingle_peerconnection_ ...