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. PHP 如何获取当前的域名

    PHP 如何获取当前的域名.这是PHP最基础的东西,也是用得最多的,记录下来 <? //获取当前的域名: echo $_SERVER['SERVER_NAME']; //获取来源网址,即点击来到 ...

  2. 使用 Wireshark 调试 HTTP/2 流量

    https://imququ.com/post/http2-traffic-in-wireshark.html

  3. R 统计学工具部署和使用

    由于公司内部对于市场数据分析的需求,要求引入R统计工具,并集成到报表工具中.对于R的介绍,大家请百度一下,当然,最好能去看官方的说明 https://www.r-project.org/ 下面简单介绍 ...

  4. 有损FLV视频的画面宽高比修改方案

    问题背景: 需要向网站上发布一条视频新闻,就是新闻只有一段视频.上面给的是一个FLV的视频,大小接近200M,差不多200分钟吧.本来觉得很简单的事,直接上传发布就完了,但是一波三折啊……第一轮上传时 ...

  5. Java-编写一个jdbc操作类

    1.通过读取文件配置 package 数据库操作类; /* * Db.java Created on 2007年8月20日, 上午 8:37 */ import java.io.*; import j ...

  6. memcache中的add和set方法区别

    相信大家对memcache都不陌生,在项目中也经常使用memcache作为缓存方案,那么在使用过程中有没有发现为什么memcahce有两个添加缓存的方法:一个是add,一个是set,那么你知道这2个方 ...

  7. javascript笔记——jquery.each中使用continue和break的方式

    jQuery.each中continue的方式是 return  true  break 的方式是return false

  8. linux-redhat5找回root密码

    我在虚拟机里装了个redhat(RedhatEnterpriseLinuxASv5.4-x64),也不经常用,偶尔进去用用吧,又把密码忘记了,哎...脑子不好使啊 不知道像ubuntu是不是一样的,还 ...

  9. 加载jar文件输出class和method

    package file import java.util.jar.JarEntry import java.util.jar.JarFile import org.junit.Test; class ...

  10. java方法:flush()

    flush本意是冲刷,这个方法大概取自它引申义冲马桶的意思,马桶有个池子,你往里面扔东西,会暂时保存在池子里,只有你放水冲下去,东西才会进入下水道. 同理很多流都有一个这样的池子,专业术语叫缓冲区,当 ...