[Angularjs]$http.post與$.post

標籤：tco   public   uri   targe   image   style   set   摘要   幸好   

摘要

在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的情況，到底區別在哪兒？

@{    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