深入理解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 相关文章推荐
QUnit jQuery的TDD框架
Nov 04 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
详解通过JSON数据使用VUE.JS
May 26 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
微信小程序实现点击图片放大预览
Oct 21 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常用的小程序代码段
2015/11/14 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
python self,cls,decorator的理解
2009/07/13 Python
python练习程序批量修改文件名
2014/01/16 Python
python返回昨天日期的方法
2015/05/13 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
Django URL传递参数的方法总结
2016/08/28 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
秋季运动会活动方案
2014/02/05 职场文书
领导失职检讨书
2014/02/24 职场文书
经销商年会策划方案
2014/05/29 职场文书
校园元旦活动总结
2014/07/09 职场文书