【easyui】js中动态拼接查询参数

阳光穿透心脏的1/2处 2023-06-25 08:08 8阅读 0赞

## 需求描述 ##

公司前端框架使用easyui + layUI，当我们需要开发一个导出功能，调用`window.location.href`方式弹出新的页面，导出数据表格时发现：

1.  此处传参只能传url的字符串，因此参数必须类似于`https://blog.csdn.net/xuexiiphone?xx1=xx1&xx2=xx2`
2.  此时，我们需要通过不同组件的getValue方法或者val()的方式，获取到相应的参数以及参数名。将其拼接到url后面。
3.  如果查询条件特别多，则url会写的很长，而且不利于后期维护。

## 实现步骤 ##

1.  实现getFormData方法，通过遍历表单内的ID，将ID以及value以key-value的形式返回一个map数组。

//根据表单id,获取表单元素值，返回json
    //form参数为form表单的ID，此处可以自己定义
    function getFormData(form) {
        var o = {};
        var a;
        if ((typeof form) == "string") {
            a = $("#" + form).serializeArray();
        } else {
            a = form.serializeArray();
        }
    
        $.each(a, function () {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    }

1.  实现getUrlParams(url)方法，将获取到的key-value值，拼接到url后面

/**
     * 动态拼接URL参数 
     * @param url         需要调用的url字符串
     * @return url		  将searchForm表单中的查询参数，逐个拼接到url后面
     */
    function getUrlParams(url) {
    	var paramDatas = getFormData("searchForm");
    	for(var k in paramDatas){
            var value = paramDatas[k] !==undefined ? paramDatas[k] : '';
            if(value != "") {
    			url = url + "&"+k+"="+value;
            }
        }
        //如果有一个或者一个以上参数的&符号，需要将第一个转换为？
        url = url.replace('&', '?');
        return url
    }

1.  这样，我们在调用函数的时候，就可以很简单的实现参数传递

//导出按钮
    	function exportClick() {
    		var url = getUrlParams("localhost:8080/exportListByUser.do")
    		window.location.href = url;
    	}