angularjs的POST
Posted z.ain
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs的POST相关的知识，希望对你有一定的参考价值。
post方式 数据量大
angularjs的content-type不一样
jQuery,原生Ajax：
x-www-form-urlencoded 经典-所有服务器都认
Angularjs: json 新潮-部分服务器默认不支持
1.从后台入手
2.前台解决
改Angularjs库---不靠谱
配置Anguarjs库
配置Angularjs的POS方式
1.简单的
2.高大上-->
1.为啥POST出问题了
AngularJs想多了，摒弃了application/x-www-form-urlencoded=>application/json
a.改个头
$http({
url,
data,
method,
headers:{‘content-type‘:‘application/x-www-form-urlencoded‘}
});
b.改内容
$http({
transformRequest(obj){
return "要传输的字符串"
}
});
{a:12,b:5}=>"a=12&b=5"
配置angularjs：
mod.config(function($httpProvider){
$httpProvider.defaults.transformRequest=function(){}
$httpProvider.defaults.post[‘Content-Type‘]=‘application/x-www-form-urlencoded‘
})
给出代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>angularjs中的$http.post()</title> <script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body ng-app="myApp"> <!--post方式 数据量大--> <!--angularjs的content-type不一样 jQuery,原生Ajax： x-www-form-urlencoded 经典-所有服务器都认 Angularjs: json 新潮-部分服务器默认不支持 1.从后台入手 2.前台解决 改Angularjs库---不靠谱 配置Anguarjs库 配置Angularjs的POS方式 1.简单的 2.高大上--> <!--1.为啥POST出问题了 AngularJs想多了，摒弃了application/x-www-form-urlencoded=>application/json a.改个头 $http({ url, data, method, headers:{‘content-type‘:‘application/x-www-form-urlencoded‘} }); b.改内容 $http({ transformRequest(obj){ return "要传输的字符串" } }); {a:12,b:5}=>"a=12&b=5" 配置angularjs： mod.config(function($httpProvider){ $httpProvider.defaults.transformRequest=function(){} $httpProvider.defaults.post[‘Content-Type‘]=‘application/x-www-form-urlencoded‘ })--> <div ng-controller="main"> <input type="text" ng-model="a" /> <input type="text" ng-model="b" /> <input type="button" value="计算" ng-click="calc()" /> </div> <script type="text/javascript"> angular.module("myApp", []) .controller("main", ["$scope", "$http", function ($scope, $http) { $scope.calc = function () { $http({ method: ‘POST‘, url: ‘Handler1.ashx‘, data: { a: $scope.a, b: $scope.b }, headers: { ‘content-type‘: ‘application/x-www-form-urlencoded‘ }, transformRequest: function (obj) { let arr = []; for (let name in obj) { arr.push(`${name}=${obj[name]}`); } return arr.join(‘&‘); } }).then((res) => { alert(res.data); }, (err) => { alert("失败了"); }); } }]) </script> </body> </html>
Handler1.ashx
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace WebApplication5 { /// <summary> /// Handler1 的摘要说明 /// </summary> public class Handler1 : IHttpHandler { public void ProcessRequest(HttpContext context) { //context.Response.ContentType = "text/plain"; //context.Response.Write("Hello World"); context.Response.ContentType = "text/html"; string a = context.Request["a"]; string b = context.Request["b"]; var c = Convert.ToInt32(a) + Convert.ToInt32(b); context.Response.Write(c);//根据当前电脑的硬件编号+系统时间微秒数 } public bool IsReusable { get { return false; } } } }
配置后的angularjs的post的写法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>angularjs中的$http.post()</title> <script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="main"> <input type="text" ng-model="a" /> <input type="text" ng-model="b" /> <input type="button" value="计算" ng-click="calc()" /> </div> <script type="text/javascript"> let mod = angular.module("myApp", []); mod.config(function ($httpProvider) { $httpProvider.defaults.transformRequest = function (obj) { let arr = []; for (let name in obj) { arr.push(`${name}=${obj[name]}`); } return arr.join(‘&‘); }; $httpProvider.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded‘; }); mod.controller("main", ["$scope", "$http", function ($scope, $http) { $scope.calc = function () { $http({ method: ‘POST‘, url: ‘Handler1.ashx‘, data: { a: $scope.a, b: $scope.b } }).then((res) => { alert(res.data); }, (err) => { alert("失败了"); }); } }]) </script> </body> </html>
以上是关于angularjs的POST的主要内容，如果未能解决你的问题，请参考以下文章