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

本人在用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、前端截图，参数明明是传了的

3、后台主要代码

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

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

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

 

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

解决方案

（一） 第一种解决方案

	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字符串

问题解决  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  前端必须传条件搜索的条件，模糊查询，还是> < = 所以前端对参数需要做一些处理

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

前端代码：、

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