深入理解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 相关文章推荐
用 JavaScript 迁移目录
Dec 18 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
jquery获取tagName再进行判断
May 29 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
浅谈React高阶组件
Mar 28 Javascript
原生JS实现轮播图效果
Oct 12 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
Vue实现简易计算器
Feb 25 Javascript
对vuex中store和$store的区别说明
Jul 24 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
浅析Python基础-流程控制
2016/03/18 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
Viking比利时:购买办公用品
2019/10/30 全球购物
小学生母亲节演讲稿
2014/05/07 职场文书
还款承诺书范文
2014/05/20 职场文书
企业宣传标语
2014/06/09 职场文书
应届大专生自荐书
2014/06/16 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
Python matplotlib多个子图绘制整合
2022/04/13 Python