Shulou(Shulou.com)06/03 Report--

This article is about the sample analysis of $http.post and $.post in Angularjs. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

An example

Here we simulate a login scenario in which the post user name and password are accepted by the server and returned directly to the client without other business processing.

Use the angularjs version

/ * AngularJS v1.2.15 (c) 2010-2014 Google, Inc. Http://angularjs.org License: MIT*/

Server side

Public class AccountController: Controller {/ / GET: / / 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

First, use the method of $.post to submit the account password directly.

$.post ("@ Url.Content (" ~ / Account/Login ")", {userName: "2342342", userPwd: "2sssdfs"}, function (data) {console.log (data);})

Response

Here, let's look at the request body.

So now let's take a look at angularjs's $http.post. What's the difference?

@ {Layout = null;} IT user login 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);};}); login

Log in

Appeared, in the habit of reasons, usually will write $http.post like this. But the result is not what you want. So let's compare the request body with $.post.

Did you see that? That's the difference.

If you find a problem, we will convert it to the $.post method of submitting parameters. Fortunately, $http.post in angularjs provides a transformRequest method for converting parameters, which can be added to 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 ("&") }}

Its purpose is to convert the submitted parameters to $.post submission parameters. The parameters in the request body you see in this way are the same as $.post.

Can be set globally

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';})

Angularjs needs to configure parameters when making a post request. With regard to angularjs's post request, it is recommended to set the post request header and request parameter conversion settings when initializing the module, so that it can be easily used in other places.

Thank you for reading! This is the end of the article on "sample Analysis of $http.post and $.post in Angularjs". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.