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
原文地址：https://www.cnblogs.com/zhumeiming/p/9818652.html