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. ASP.Net MVC4+Memcached+CodeFirst实现分布式缓存

    ASP.Net MVC4+Memcached+CodeFirst实现分布式缓存 part 1:给我点时间,允许我感慨一下2016年 正好有时间,总结一下最近使用的一些技术,也算是为2016年画上一个完 ...

  2. C#异步编程

    什么是异步编程 什么是异步编程呢?举个简单的例子: using System.Net.Http; using System.Threading.Tasks; using static System.C ...

  3. K60——寄存器

    (1)PTx_BASE_PTR为GPIO寄存器结构体基址指针(PTR即point to register,x=A/B/C/D/E) /* GPIO - Peripheral instance base ...

  4. 【Android自学日记】搭建Android开发环境

    搭建Android应用开发环境所需工具 1_> JDK(JAVA Development)推荐使用6.0以后版本 配置环境变量(以下是环境变量的具体内容及介绍) ================ ...

  5. 开源镜像源(转自[tanghuimin0713的博客])

    参考: http://blog.csdn.net/longerzone/article/details/8437871 http://www.douban.com/note/375227086/ 1. ...

  6. 如何修改mysql用户名和密码

    如何修改mysql用户名和密码   以修改mysql的root密码为例修改的三种方法 方法1: 用SET PASSWORD命令 mysql>SET PASSWORD FOR 'root'@'lo ...

  7. cocos2dx 动画显示异常

    最近遇到一个问题 好多cocostudio导出的动画 显示都会有异常 很明显的融合方式 把混合方式里面的 src 改成one dst 改成 one-src alpha 解决 后面附上同行的文章 浅显易 ...

  8. 百度定位并获取县区天气-XML+fragment+sqlite

    此工程较BaiduLocationXMLFragment相比:1.加入数据库部分,将获取到的地址  天气存入数据库中,离线状态显示数据库最后一条记录 sqlite: DatabaseHelper.ja ...

  9. Leetcode | substr()

    求子串当然最经典的就是KMP算法了.brute force算法在leetcode上貌似也有一些技巧. brute force: char* StrStr(const char *str, const ...

  10. Inno_setup制作升级包必须面临的几个问题

    Inno_setup制作升级包必须面临的几个问题 分类: c/c++/GamingAnyWhere JavaScript linux shell基础知识 2013-12-18 22:14 1496人阅 ...