Angularjs 发送请求传递参数数据

r囧r小猫 2022-05-10 05:58 473阅读 0赞

### 文章目录 ###

*   *  1. AngularJs 的http请求
     *  2. 常见的几种请求方式
     *  3. AngularJs 的参数传递(spring mvc接收请求)
     *  4. Angularjs post 请求参数传递使用 From data 形式

## 1. AngularJs 的http请求 ##

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

*  标准写法，使用格式：

// 简单的 GET 请求，可以改为 POST
    $http({
        method: 'GET',
        url: '/someUrl'
    }).then(function successCallback(response) {
            // 请求成功执行代码
        }, function errorCallback(response) {
            // 请求失败执行代码
    });
    
    //或者 直接写 success ，在success 中写响应成功的代码
    $http({
            method: "POST",
            url: "../brand/delete.do",
            data: {
                ids: $scope.ids
                  }
            }).success(
              function (response) {
                // 请求成功执行代码
            }
    );

--------------------

*  简单写法  
    POST 与 GET 简写方法格式：

$http.get('/someUrl?username=zhangsan&password=pw', config).then(successCallback, errorCallback);
    $http.post('/someUrl', data, config).then(successCallback, errorCallback);
    
    //还有一些别的
    $http.get
    $http.head
    $http.post
    $http.put
    $http.delete
    $http.jsonp
    $http.patch

参考：[AngularJS XMLHttpRequest][]

## 2. 常见的几种请求方式 ##

![在这里插入图片描述][70]  
HTTP 请求报文格式  
GET的参数都会放在URL的后面，一般称之为query参数。  
POST的都放在HTTP的报文BODY里。

*  From data 格式  
    request Header中的ContentType为 Content-Type: application/x-www-form-urlencoded  
    并且请求正文是类似 get 请求 url 的请求参数  
    ![在这里插入图片描述][70 1]
 *  Request Payload格式  
    request Header中的ContentType为 Content-Type:application/json;charset=UTF-8  
    请求正文是一个 json 格式的字符串  
    ![在这里插入图片描述][70 2]
 *  multipart格式  
    request Header中的ContentType为 ContentType: multipart/form-data;boundary=–xxxxxxx， 注意对multipart的格式都要有boundary做为BODY中的参数分隔符  
    对于multipart格式，需要使用流方式边收边解析，因为有可能是大文件上传。  
    参考：[Request Payload][]

## 3. AngularJs 的参数传递(spring mvc接收请求) ##

1.  对于 Form Data 请求，无需任何注解，springmvc 会自动使用 MessageConverter 将请求参数解析到对应的 bean，且通过 request.getParameter(…) 能获取请求参数
2.  对于 Request Payload 请求， 必须加 @RequestBody 才能将请求正文解析到对应的 bean 中，且只能通过 request.getReader() 来获取请求正文内容  
    参考： [http协议的Request Payload 和 Form Data 的区别][http_Request Payload _ Form Data]

*  简单写法 get 请求

$http.get("../brand/findOne.do?id="+id).success(
        function(response){   
            // 请求成功执行代码
        }

![在这里插入图片描述][70 3]  
接收参数方式：  
@RequestParam

A） 常用来处理简单类型的绑定，通过Request.getParameter() 获取的String可直接转换为简单类型的情况（ String–> 简单类型的转换操作由ConversionService配置的转换器来完成）；因为使用request.getParameter()方式获取参数，所以可以处理get 方式中queryString的值，也可以处理post方式中 body data的值；

B）用来处理Content-Type: 为 application/x-www-form-urlencoded编码的内容，提交方式GET、POST；

C) 该注解有两个属性： value、required； value用来指定要传入值的id名称，required用来指示参数是否必须绑定；

/**
     * 查询一个品牌信息
     * @param id 品牌id
     * @return
     */
    @RequestMapping("/findOne")
    public TbBrand findOne(@RequestParam long id){
            return service.findOne(id);
    }
    参数名不一致，@RequestParam(value="xx") long id

--------------------

*  简单写法 post 请求

$http.post("../brand/ethodName.do",$scope.entity).success(
    function(response){
                       // 请求成功执行代码 
    )
    其中的  $scope.entity 就是要提交的数据

![在这里插入图片描述][70 4]

接收参数的方式：  
@RequestBody  
该注解常用来处理Content-Type: 不是application/x-www-form-urlencoded编码的内容，例如application/json, application/xml等；  
它是通过使用HandlerAdapter 配置的HttpMessageConverters来解析post data body，然后绑定到相应的bean上的。  
因为配置有FormHttpMessageConverter，所以也可以用来处理 application/x-www-form-urlencoded的内容，处理完的结果放在一个MultiValueMap<String, String>里，这种情况在某些特殊需求下使用，详情查看FormHttpMessageConverter api;

/**
     * 更新一个品牌信息
     * @param brand 品牌
     * @return
     */
    @RequestMapping("/update")
    public Result update(@RequestBody TbBrand brand){
       //代码
    }

可以直接封装成对象，当前也可以封装为数组，集合什么的。

--------------------

*  标准格式的 get 请求

$http({
        method: "GET",
        url: "../brand/findOne.do",
        params: {
            id: id
        }
    }).success(
        function(){
         //请求成功
        }
    );

当你这样写的时候它会把id写到url后面

params这个参数是用在GET请求中的，而POST/PUT/PATCH就需要使用data来传递;

在后台接收的方式 ，使用@RequestParam 即可。

--------------------

*  标准格式的 post 请求

$http({
        method: "POST",
        url: "../brand/delete-reqpayload.do",
        data: {
            ids: $scope.ids
        }
    }).success(
        function (response) {
            // 请求成功执行代码
        }
    );

这样传递参数，跟简单post请求一样，参数都存放到了Request Payload。

后台需要使用 @RequestBody 接收参数

@RequestMapping("/delete-reqpayload")
        public Result delete_reqplayload(@RequestBody Ids ids){
            System.out.printf("ids"+ids.toString());
    
        }

参考：[@RequestParam @RequestBody @PathVariable 等参数绑定注解详解][RequestParam _RequestBody _PathVariable]

--------------------

## 4. Angularjs post 请求参数传递使用 From data 形式 ##

如果想在后台使用@RequestParam 接收 Post 请求参数，需要将其参数进行序列化  
代码：

$http({
                    method: "POST",
                    url: "../brand/delete.do",
                    data: {
                        ids: $scope.ids
                    },
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, //将其变为 form-data 参数形式
                    transformRequest: function(obj) {   //序列化参数
                        var str = [];
                        for (var s in obj) {
                            str.push(encodeURIComponent(s) + "=" + encodeURIComponent(obj[s]));
                        }
                        return str.join("&");
                    }
                }).success(
                        //请求成功
                    }
    );

后台接收，看你对应的数据类型是什么

@RequestMapping("/delete")
    public Result delete(@RequestParam Long ids[]){
       //代码
    }

参考：[AngularJS $http post 传递参数数据][AngularJS _http post]  
![在这里插入图片描述][70 5]

[AngularJS XMLHttpRequest]: https://www.runoob.com/angularjs/angularjs-http.html
[70]: /images/20220510/c1f8d254fe5343069f4518fa850a2090.png
[70 1]: /images/20220510/772189e4681145588630ab762f07a2e9.png
[70 2]: /images/20220510/6349af0c5c2f4ba892996d18f312c087.png
[Request Payload]: https://blog.csdn.net/hdx_008/article/details/80340900
[http_Request Payload _ Form Data]: https://www.cnblogs.com/xuzhudong/p/8487119.html
[70 3]: /images/20220510/814cb608741f42d09c67e4aef7284b5f.png
[70 4]: /images/20220510/726b03a7d8904c688d1db07567628ba5.png
[RequestParam _RequestBody _PathVariable]: https://www.cnblogs.com/guoyinli/p/7056146.html
[AngularJS _http post]: https://blog.csdn.net/gufeilong/article/details/53584967
[70 5]: /images/20220510/7293b1e91a614f6784d2c57b27a7140f.png