Angular和jQuery的ajax请求的区别

最新推荐文章于 2021-08-06 05:42:45 发布

crazyxin1988

最新推荐文章于 2021-08-06 05:42:45 发布

阅读量2.5w

点赞数 6

本文链接：https://blog.csdn.net/crazyxin1988/article/details/39643173

版权

最近项目中使用angular，结果发现后台没法获取参数，所以，稍微研究了一下两者在发送ajax时的区别。

注意angular和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是进行了转换的。

data

Type: 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()方法是获取不到参数的。

写了demo程序。html页面

 
       <!DOCTYPE html> 
      

 
            
       < 
       script  
       src 
       = 
       "js/jquery.js" 
       ></ 
       script 
       > 
      

 
            
       < 
       script  
       src 
       = 
       "js/angular.js" 
       ></ 
       script 
       > 
      

 
       < 
       body  
       ng-app 
       = 
       "myApp" 
       > 
      

 
            
       < 
       h1 
       >Hello World</ 
       h1 
       > 
      

 
            
       < 
       span 
       >Angular ajax:</ 
       span 
       > 
      

 
            
       < 
       a  
       href 
       = 
       "#"  
       ng-controller 
       = 
       "btnCtrl"  
       ng-click 
       = 
       "asave()" 
       >Button</ 
       a 
       > 
      

 
            
       < 
       span 
       >jQuery ajax:</ 
       span 
       > 
      

 
            
       < 
       span 
       >Angular as jQuery ajax:</ 
       span 
       > 
      

 
            
       < 
       a  
       href 
       = 
       "#"  
       ng-controller 
       = 
       "btnCtrl"  
       ng-click 
       = 
       "ajsave()" 
       >Button</ 
       a 
       > 
      

 
       < 
       script  
       src 
       = 
       "js/index.js" 
       ></ 
       script 
       > 
      

页面上有三个按钮：

第一个使用angular 的 $http发送ajax请求

第二个使用jquery的 $ajax发送ajax请求

第三个使用angular的$http方法按照jquery中的方式发送ajax请求

 
       var  
       myApp = angular.module( 
       'myApp' 
       ,[]); 
      

 
       var  
       btnCtrl = myApp.controller( 
       'btnCtrl' 
       ,[ 
       '$scope' 
       , 
       '$http' 
       , 
       function 
       ($scope,$http){ 
      

 
       $scope.asave =  
       function 
       (){

 
       var  
       user = {

 
       name :  
       'zhangsan' 
       ,

 
       id :  
       '3'

}

 
                
       $http({method: 
       'POST' 
       ,url: 
       '/asave' 
       ,data:user}).success( 
       function 
       (data){ 
      

 
       console.log(data);

})

};

 
       $scope.ajsave =  
       function 
       (){

 
       var  
       data =  
       'namelisi&id=4'

 
       $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);

});

};

 
       }]); 
      

 
       $( 
       '#jBtn' 
       ).on( 
       'click' 
       , 
       function 
       (){ 
      

 
       $.ajax({

 
       type :  
       'POST' 
       ,

 
       url :  
       'jsave' 
       ,

 
                
       data : {name: 
       'wangwu' 
       ,id: 
       '5' 
       }, 
      

 
       dataType: 
       'json' 
       ,

 
       success :  
       function 
       (data){

 
       console.log(data);

}

})

});

使用angular发送请求（asave方法）时，使用firbug看：

使用jquery发送请求（jsave方法）时，使用firbug看：

所以，如果想用angular达到相同的效果，主要有点：

1.修改Content-Type为application/x-www-form-urlencoded; charset=UTF-8

2.请求参数的格式 key=value的格式，如果，多个，则使用&连接

ajsave方法，经过改造后，用firbug看源代码

这是前端的发送，那后端使用springmvc接受参数，怎么处理呢？

以前使用jquery，一般使用@RequestParam注解或者request.getParameter方法接受数据。但是使用angular后，这样是接受不到数据的。

如果想接受，可以这样，定义一个接受的类，要有setter和getter方法。

定义User类

 
       public  
       class  
       User { 
      

 
       public  
       String name;

 
       public  
       String id;

 
       public  
       String getName() {

 
       return  
       name;

}

 
       public  
       void  
       setName(String name) {

 
       this 
       .name = name;

}

 
       public  
       String getId() {

 
       return  
       id;

}

 
       public  
       void  
       setId(String id) {

 
       this 
       .id = id;

}

}

在Controller中

1

2

3

4

5

6

7

 
       @RequestMapping 
       ( 
       "/asave" 
       ) 
      

 
       @ResponseBody

 
       public  
       String asave( 
       @RequestBody  
       User user){

 
       System.out.println( 
       "name---" 
       +user.getName());

 
       System.out.println( 
       "id---" 
       +user.getId());

 
       return  
       "ok" 
       ;

}

所以，angular默认的这种请求的传参方式，还得定义一个类，所以，在使用angular发送请求时，可以按照上面说的方法，改成jquery方式，这样，对于一些简单参数，获取就比较方便一些。

完整controller代码：

 
       @Controller 
      

 
       public  
       class  
       MyController { 
      

 
       @RequestMapping 
       ( 
       "/test" 
       )

 
       @ResponseBody

 
       public  
       String test(){

 
       return  
       "hello world" 
       ;

}

 
       @RequestMapping 
       ( 
       "/asave" 
       )

 
       @ResponseBody

 
       public  
       String asave( 
       @RequestBody  
       User user){

 
       System.out.println( 
       "name---" 
       +user.getName());

 
       System.out.println( 
       "id---" 
       +user.getId());

 
       return  
       "ok" 
       ;

}

 
       @RequestMapping 
       ( 
       "/jsave" 
       )

 
       @ResponseBody

 
            
       public  
       String jsave( 
       @RequestParam  
       String name,  
       @RequestParam  
       String id){ 
      

 
       System.out.println( 
       "name---" 
       +name);

 
       System.out.println( 
       "id---" 
       +id);

 
       return  
       "ok" 
       ;

}

 
       @RequestMapping 
       ( 
       "/ajsave" 
       )

 
       @ResponseBody

 
            
       public  
       String ajsave( 
       @RequestParam  
       String name,  
       @RequestParam  
       String id){ 
      

 
       System.out.println( 
       "name---" 
       +name);

 
       System.out.println( 
       "id---" 
       +id);

 
       return  
       "ok" 
       ;

}

}

crazyxin1988

关注

6
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
Angular和jQuery的ajax请求的区别

注意angular和jquery的ajax请求是不同的。在jquery中，官方文档解释contentType默认是 application/x-www-form-urlencoded; charset=UTF-8contentType (default: 'application/x-www-form-urlencoded; charset=UTF-
复制链接

扫一扫