专栏首页csxiaoyaoAngularjs和jQuery的ajax的请求区别

Angularjs和jQuery的ajax的请求区别

原因分析

  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中,$httpcontentType默认值是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-Typeapplication/x-www-form-urlencoded; charset=UTF-8 2. 设置请求参数为key=value格式,如果有多个参数,使用&连接

  若一定要使用angular的方式,那后端使用springmvc接受参数需要定义一个有settergetter方法的接受的类即可。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HDU 1027 组合数学

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Ot...

    csxiaoyao
  • HDU 1002 高精度 大数据加法

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Ot...

    csxiaoyao
  • HDU 1075 字典树 字符串匹配

    Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 102400/204800 K (Java...

    csxiaoyao
  • tr命令在统计英文单词出现频率中的妙用

    tr命令我们很清楚,可以删除替换,删除字符串。 在英文中我们要经常会经常统计英文中出现的频率,如果用常规的方法,用设定计算器一个个算比较费事,这个时候使用tr命...

    砸漏
  • Label propagation with semi-supervised learning半监督学习之标签传播算法

    Label propagation is a semi-supervised technique that makes use of the labeled a...

    到不了的都叫做远方
  • 关于试图给新打开的Component第一个focusable元素设置focus的问题

    Requirement from https://github.com/SAP/spartacus/issues/9531

    Jerry Wang
  • 使用SAP Cloud Application Studio实现OVS(Object Value Selector)

    (1) Create a new OVS based on Customer BO:

    Jerry Wang
  • Windows编译libjpeg库

      由于VC++6的编译方法与VS2017方法基本相同,这里使用VS2017的编译环境编译。

    Qt君
  • 一步步使用SAP CRM Application Enhancement Tool创建扩展字段

    (2) Click hyperlink “Personalize Settings”, enable checkbox “Enable configuratio...

    Jerry Wang
  • Ubuntu16.04环境下搭建FTP服务器的教程

    由于此处连接的是wifi,因此在wlp3s0这里找到对应的ip地址为192.168.1.110(如果连接网线则在第一段找ip,每台电脑的配置都不一样,可根据实际...

    砸漏

扫码关注云+社区

领取腾讯云代金券