Angularjs和jQuery的ajax的请求区别
来源:互联网 发布:免费名片设计软件下载 编辑:程序博客网 时间:2024/06/11 08:01
Angularjs和jQuery的ajax的请求区别
- Angularjs和jQuery的ajax的请求区别
- 原因分析
- 测试效果
- 解决方案
我的主页 www.csxiaoyao.com
原因分析
Angularjs和jQuery的ajax的请求是不同的。在jquery中,官方文档解释contentType
默认是application/x-www-form-urlencoded; charset=UTF-8
contentType (default: ‘application/x-www-form-urlencoded; charset=UTF-8’)
Type: String
When sending data to the server, use this content type. Default is “application/x-www-form-urlencoded; charset=UTF-8”, which is fine for most cases. If you explicitly pass in a content-type to $.ajax(), then it is always sent to the server (even if no data is sent). The W3C XMLHttpRequest specification dictates that the charset is always UTF-8; specifying another charset will not force the browser to change the encoding. Note: For cross-domain requests, setting the content type to anything other than application/x-www-form-urlencoded, multipart/form-data, or text/plain will trigger the browser to send a preflight OPTIONS request to the server.
而参数data,jquery进行了转换。
dataType: PlainObject or String or Array
Data to be sent to the server. It is converted to a query string, if not already a string. It’s appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below).
此外
Sending Data to the Server
By default, Ajax requests are sent using the GET HTTP method. If the POST method is required, the method can be specified by setting a value for the type option. This option affects how the contents of the data option are sent to the server. POST data will always be transmitted to the server using UTF-8 charset, per the W3C XMLHTTPRequest standard.
The data option can contain either a query string of the form key1=value1&key2=value2, or an object of the form {key1: ‘value1’, key2: ‘value2’}. If the latter form is used, the data is converted into a query string using jQuery.param()before it is sent. This processing can be circumvented by setting processData to false. The processing might be undesirable if you wish to send an XML object to the server; in this case, change the contentType option from application/x-www-form-urlencoded to a more appropriate MIME type.
所以,jquery将javascript对象转换成字符串传给后台。在SpringMVC中,就可以使用@RequestParam
注解或者request.getParameter()
方法获取参数。
而在angular中,$http
的contentType
默认值是application/json;charset=UTF-8
,这样在后台,SpringMVC通过@RequestParam
注解或者request.getParameter()
方法是获取不到参数的。
测试效果
- 使用angular的
$http
发送ajax请求(jsave) - 使用jquery的
$ajax
发送ajax请求(asave) - 使用angular的
$http
方法按照jquery中的方式发送ajax请求(ajsave)
$scope.asave = function(){ $.ajax({ type : 'POST', url : '/asave', data : { name:'csxiaoyao', id:'1' }, dataType:'json', success : function(data){ console.log(data); } });};$scope.jsave = function(){ var user = { name : 'csxiaoyao', id : '1' } $http({ method:'POST', url:'/jsave', data:user }).success(function(data){ console.log(data); });};$scope.ajsave = function(){ var data = 'name=csxiaoyao&id=1' $http({ method: 'POST', url: '/ajsave', data: data, // pass in data as strings headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'} }).success(function (data) { console.log(data); });};
解决方案
所以,如果想用angular达到相同的效果,有两步操作:
1. 修改Content-Type
为application/x-www-form-urlencoded; charset=UTF-8
2. 设置请求参数为key=value
格式,如果有多个参数,使用&
连接
若一定要使用angular的方式,那后端使用springmvc接受参数需要定义一个有setter
和getter
方法的接受的类即可。
- Angularjs和jQuery的ajax的请求区别
- jQuery及AngularJs的ajax请求对比
- jQuery和AngularJS的区别
- Angular和jQuery的ajax请求的区别
- 跨域解决方案 & 使用angularJS和jQuery进行Ajax请求的差异
- 跨域解决方案 & 使用angularJS和jQuery进行Ajax请求的差异
- AJAX技术和Jquery的AJAX请求
- jQuery和AngularJS的区别浅析
- jQuery和AngularJS的区别浅析
- jQuery和AngularJS的区别浅析
- AngularJS和jQuery的区别分析
- jQuery和AngularJS的区别浅析
- jquery和ajax 的区别
- AngularJs中POST和GET方式的ajax请求
- JQuery的Ajax请求
- jquery的$.ajax请求
- jquery 的ajax请求示例和注意事项
- ajax的get和post请求区别
- 每一个有理想的程序员都应该读的一本书-《rework》
- 算法设计与应用基础:第六周
- rabbitmq的用户管理
- JSP九大内置对象
- 【Leetcode】Jump Game
- Angularjs和jQuery的ajax的请求区别
- XML解析中的namespace初探
- 局域网唤醒(WOL)与远程唤醒教程
- 《More Effective C++》条款27:如何让类对象只在栈(堆)上分配空间?
- 查找句子中最长的单词
- Sublime theme and color theme
- 【BZOJ 3555】【CTSC 2014】企鹅QQ【hash】
- (转)马云:人算不如天算,天算就是云计算
- USTC-NP2016课程学习总结