【easyui】js中動態拼接查詢參數

需求描述

公司前端框架使用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;
}

3. 實現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
}

3. 這樣，我們在調用函數的時候，就可以很簡單的實現參數傳遞

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