react axios请求服务器，服务器接收不到参数问题

电玩女神 2022-05-15 14:54 470阅读 0赞

本人在用react写页面时。请求自己后台，发现明明传了参数，后台debug模式，查看，接收不了参数。

问题点：传参格式不正确，与后台想要的格式不一致。

业务描述：角色页面，初始化页面获取角色，分页查询，参数为分页参数

### **（一）不能传参时的  （第一种场景）** ###

**1、前端代码**

constructor(props) {
    	    super(props)
    	    this.state = {
    	      tData: []
    	    }
    	}
    
        getData(){            
            var _this = this;
            let para = {
                    page: '1',
                    rows: '10',
               };                
            axios.post('http://xxxxxxxxxx:8080/roles',para
            ).then(function (res) {
    			console.log(res);
    			let json = res.data.rows;
                _this.setState({tData: json});
    		} ).catch(err => console.log(err));                                                            
    	}

2、前端截图，参数明明是传了的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70][]

3、后台主要代码

@Override
        public JGridBody getRoleList(HttpServletRequest request) throws Exception {
            // 取得当前页数,注意这是jqgrid自身的参数
            String page = request.getParameter("page");
            // 取得每页显示行数,注意这是jqgrid自身的参数
            String rows = request.getParameter("rows");
        }

4、服务器相关截图： 参数为null

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70 1][]

debug模式查看接收参数处。依然接收为null

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70 2][]

也请求到了后台，参数前端也传了，要么后台接收有问题，要么前端处理有问题。 因为后台固定了，那么只能去前端解决此问题。

### **解决方案** ###

（一） 第一种解决方案

getData(){
            var _this = this;
            let para = {
                    page: '1',
                    rows: '10',
               };
            let pa = qs.stringify(para);   
            axios.post('http://192.168.2.52:8090/roles',pa
            ).then(function (res) {
    			console.log(res);
    			let json = res.data.rows;
                _this.setState({tData: json});
    		} ).catch(err => console.log(err));
        }

主要加上  let pa = qs.stringify(para);  此句。将对象转化成json字符串![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70 3][]

问题解决  qs需要引入  import qs from 'qs';

（二）第二种解决方案

getData(){
    	var _this = this;
            var params = new URLSearchParams();
    	params.append('page', '1');       //你要传给后台的参数值 key/value
    	params.append('rows', '10');
            axios.post('http://xxxxxxxx:8080/roles', 
                params,
        	    {headers: { 'Content-Type': 'application/x-www-form-urlencoded'}},
        	    {transformRequest:[function (data) {
                  //序列化参数
    		   data = qs.stringify(data);
    		   return data
    	    }]},
    	    {beforeSend: function(xhr) {
    		 xhr.withCredentials = false;
                }}
            ).then(function (res) {
    	    let json = res.data.rows;
                _this.setState({tData: json});
    	}).catch(err => console.log(err));
    }

## **（二）不能传参时的  （第二种场景）** ##

**还是上面的接口，不过这次是带条件搜索。之前项目用的 JGrid 写的自动解析参数**

**这次想传的参数为这几个**

formInline: {
          roleName: '',
          roleStatus: '',
          pageSize: "10",//每页条数
          pageNo: "1"//当前页码
    },

直接看解决方案吧

在【（二）第二种解决方案 】 去掉  \{headers: \{ 'Content-Type': 'application/x-www-form-urlencoded'\}\}, 这一行就ok了

### 关于业务描述： ###

因为用了 **JGrid**  前端必须传条件搜索的条件，模糊查询，还是> < = 所以前端对参数需要做一些处理

后台接收到想要的的参数格式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70 4][]

前端代码：、

onSearch = (searchFields) => {
        let matchRule = {
            roleName: 'cn',
            roleStatus: 'eq',
            orgId: 'eq',
        }
        let _this = this;
        let formInline = {
            pageSize: "10",//每页条数
            pageNo: "1"//当前页码
        }
        let par= $.extend(searchFields, formInline);
        let para = this.fromSearch(par,matchRule);
        axios.post("http://xxxxxxxx:8080/roles",para,
            {transformRequest:[function (data) {
     	   //序列化参数
                data = qs.stringify(data);
                return data
            }]},
            {beforeSend: function(xhr) {
                xhr.withCredentials = false;
            }}
        ).then((res) => {
            let json = res.data.rows;
            _this.setState({tData: json});	
        }).catch((error) => {
            alert("请求出错！")
        })
    }
    
    
    fromSearch = (parameters, matchRule) => {
        var postData = {};
        var res = "";
        $.each(parameters, function(i, val) {
    	let searchType =  matchRule[i];
    	if (searchType && val) {
    	    res += ',{"field":"' + i + '","op":"' + searchType + '","data":"' + val + '"}';
    	}
    	if(i=='pageSize'){  //固定参数处理
    	    postData["rows"] = val;
    	}
    	if(i=='pageNo'){
    	    postData["page"] = val;
    	}
    	if(i=='sidx'){
    	    postData["sidx"] = val;
            }
    	if(i=='sord'){
    	    postData["sord"] = val;
    	}
        })
        if (res) {
            res = res.substring(1);
        }
        res = '{"groupOp":"AND","rules":[' + res + ']}';
        $.extend(postData, {filters: res});
        return postData;
    }

结语：本人所有文章都立志写的简单易懂，戳中问题点。 当然了，简单的同时可能忽略了很多细节与详细，如有不足的地方，还请谅解并指出。  如对文章或实现技术上有问题，可联系我：qq: 1226500260     邮箱：654868284@qq.com

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70]: /images/20220503/3d6fc00f596d4927bc1c37c2f4de970d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70 1]: /images/20220503/54104dfd98eb4f42a70a39a10f4a151a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70 2]: /images/20220503/803af2b2fa224ec4902c07a1f1240874.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70 3]: /images/20220503/d74d6cb398d946a9a613e1f58f1def78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70 4]: /images/20220503/47ddbf26a473491aab54875a94e4ffe2.png