深入理解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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
js选择器全面解析
2016/06/27 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
Python 初始化多维数组代码
2008/09/06 Python
Python中的CURL PycURL使用例子
2014/06/01 Python
Python版微信红包分配算法
2015/05/04 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
简单的Python人脸识别系统
2020/07/14 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
Pygame框架实现飞机大战
2020/08/07 Python
美国美妆网站:B-Glowing
2016/10/12 全球购物
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
警示教育活动总结
2014/05/05 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js