深入理解Angularjs中$http.post与$.post


Posted in Javascript onMay 19, 2017

摘要

在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与$.post

这里我们看一下请求体

深入理解Angularjs中$http.post与$.post

那么我们现在看看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>

登录

深入理解Angularjs中$http.post与$.post

出现了,处于习惯的原因,平时就会这样来写$http.post的。但结果并不是想要的。那么咱们与$.post对比一下请求体。

深入理解Angularjs中$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请求设置请求头与请求参数转换的设置,这样可以在其他地方方便使用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
JavaScript的public、private和privileged模式
Dec 28 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 #jQuery
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 #Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 #Javascript
微信小程序表单验证错误提示效果
May 19 #Javascript
微信小程序实现滑动删除效果
May 19 #Javascript
微信小程序图片横向左右滑动案例
May 19 #Javascript
layui导航栏实现代码
May 19 #Javascript
You might like
PHP 文件缓存的性能测试
2010/04/25 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
PDO::quote讲解
2019/01/29 PHP
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
vue-video-player 断点续播的实现
2021/02/01 Vue.js
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
对Python使用mfcc的两种方式详解
2019/01/09 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
Django model select的多种用法详解
2019/07/16 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
Linux Interview Questions For software testers
2012/06/02 面试题
会计演讲稿范文
2014/05/23 职场文书
化工专业自荐书
2014/06/16 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
python中取整数的几种方法
2021/11/07 Python
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang