jquery中对ajax的使用做了很多封装,使得我们使用习惯了,反而并不大清楚在请求过程中的一些细节。

在第一次使用angularjs的$http时,后台一直接受不到前端请求的数据,于是小小研究了一下。

用我自己这边的项目为例,后台服务这边接受请求的方式是通过HttpContext.Request.Params来,原来用jquery中的Ajax请求一直正常,一换到原始的$http,瞬间奔溃啦。。。。

如果使用最原始的$http,会发现谷歌中network的请求数据格式是:

而以前使用正常的访问下数据格式为:

对比时会发现两个问题:

1.数据在请求体中的位置不一样、

2.数据格式不一样

于是做的相关研究,结论如下

1.jquery中的$.ajax()默认Content-Type为“application/x-www-form-urlencoded”,这个设置会把请求的数据放到请求体中,即在Form Data中出现。

$http的话,默认的应该是“text/plain;charset=UTF-8”,这个设置会把请求的数据放到Request Payload中。

ps.Get 和Post的区别是请求的数据是否附加到url后面。

2.jquery中发送到服务器的数据会自动转换成类似 &foo=bar1&foo=bar2的格式,然后服务器端根据相应的格式来解析。而$http里是没有这种自动转换的,

需要自己做这个格式转换动作。

代码如下:

//启动模块
var app = angular.module('app', [
//依赖模块
], function ($httpProvider) {
var param = function (obj) {
var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

for (name in obj) {
value = obj[name];

if (value instanceof Array) {
for (i = 0; i < value.length; ++i) {
subValue = value[i];
fullSubName = name + '[' + i + ']';
innerObj = {};
innerObj[fullSubName] = subValue;
query += param(innerObj) + '&';
}
}
else if (value instanceof Object) {
for (subName in value) {
subValue = value[subName];
fullSubName = name + '[' + subName + ']';
innerObj = {};
innerObj[fullSubName] = subValue;
query += param(innerObj) + '&';
}
}
else if (value !== undefined && value !== null)
query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
}
return query.length ? query.substr(0, query.length - 1) : query;
};
// Override $http service's default transformRequest
$httpProvider.defaults.transformRequest = [function (data) {
return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
}];

});

红色文字即我们需要添加的格式转换功能。

附上请求原数据格式:

服务器端请求时如果加上上面那段转换代码,会发现属性字段之间是&分开的。如果没有的话,则不是的话,服务器端没法解析。

从jquery里的$.ajax()到angularjs的$http的更多相关文章

  1. 两强相争,鹿死谁手 — JQuery中的Ajax与AngularJS中的$http

    一.JQuery与AngularJS 首先,先简单的了解一下JQuery与AngularJS.从源头上来说,两者都属于原生JS所封装成的库,两种为平行关系. 二.Ajax请求与数据遍历打印 这里是Aj ...

  2. Jquery学习笔记 --ajax删除用户,使用了js原生ajax

    主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 <!DOCTYPE html> 2 <html lang= ...

  3. JQuery 插件之Ajax Autocomplete(ajax自动完成)搜索引擎自动显示下拉框

    平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取 ...

  4. 通过jQuery的比较来认识AngularJS

    通过jQuery的比较来认识AngularJS 这一章主要是通过几个例子分别通过jQuery和AngularJS来达到效果.主要通过思维转换来进一步了解AngularJS框架设计背后的思想. 注意: ...

  5. jQuery中的Ajax几种请求方式

    1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) : 请求的HTML页的URL地址. data (M ...

  6. 利用jQuery实现的Ajax 验证用户名是否存在

    异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用jQuery框架实现的AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJA ...

  7. 关于jQuery中的ajax的方法介绍

           jQuery提供一系列Ajax函数方便我们调用Ajax, 其中最核心也是最复杂的是jQuery.ajax(),所有的其他Ajax函数都是它的一个简化调用.当我们想要完全控制Ajax时可以 ...

  8. JQuery 插件之Ajax Autocomplete(ajax自动完成)

    平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取 ...

  9. $.ajax()方法详解 jquery中的ajax方法

    jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...

随机推荐

  1. 如何实现桌面App图标可以动态显示消息数(类似手机上的QQ图标)?

    手机上的APP , 像QQ和微信等都可以在图标上动态显示消息数(最大99) , 那么你有没有想过这些效果是如何实现的?桌面上开发的传统应用程序能否也实现类似的功能? 1 思路 桌面快捷方式的图标本质上 ...

  2. ADO.Net(四)——扩展属性和配置文件应用

    一.扩展属性 处理:有外键关系时将代号化信息处理成原始文字,让用户可看懂的(粗略解释) 利用扩展属性 如:Info表中的民族列显示的是民族代号处理成Nation表中的民族名称 需要在Info类里面扩展 ...

  3. viewport的一些事

    整理了下viewport的东西,用脑图画了下

  4. 让Qt的无边框窗口支持拖拽、Aero Snap、窗口阴影等特性

    环境:Desktop Qt 5.4.1 MSVC2013 32bit 需要的库:dwmapi.lib .user32.lib 需要头文件:<dwmapi.h> .<windowsx. ...

  5. spring.xml命名空间

    <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w ...

  6. SQL &amp; PL/SQL 模块总结

    SQL 1. 各种function 2. merge 3. connect by PL/SQL 1. pl/sql 寄出 2. 游标 3. procedure 4. function 5. packa ...

  7. Spring AOP 创建切面

        增强被织入到目标类的所有方法中,但是如果需要有选择性的织入到目标类某些特定的方法中时,就需要使用切点进行目标连接点的定位.增强提供了连接点方位信息:如织入到方法前面.后面等,而切点进一步描述织 ...

  8. bootStrap modal无法滚动处理

    bug:在大显示器上,模态框无法滚动,改变浏览器窗口大小,模态框可以滚动. 处理:模态框显示后,执行resize.或者直接调用handleUpdate 'shown.bs.modal #orderDe ...

  9. js--eval函数

    前言: js的eval函数很牛叉,用了几次--不过都没有记录.试想:如果没有EXT.JQery,怎样将json字符串转换为对象呢? 示例: 定义2个字符串变量s1.s2.其中s1表示一个对象:s2表示 ...

  10. 一些非常有用的html,css,javascript代码片段(持久更新)

    1.判断设备是否联网 if (navigator.onLine) { //some code }else{ //others code } 2.获取url的指定参数 function getStrin ...