Question

我正在尝试从输入元素中选择的值构建url参数。

例如：我有一个页面，其中有一个文本输入字段和3个选择字段（名称，部门，品牌，型号），首先我将输入值以命名文本字段，然后我将从中选择值部门下拉，然后我不会从品牌下拉中选择任何东西，然后我将从模型下拉列表中选择一些值，最后当我按下提交时，用户输入的值应该用其密钥对放入对象并生成网址使用$ .params（obj）的params并将其附加到ajax调用。我该怎么做。我有以下代码。我已经完成了。

例如：

var obj = {}
//after click on submit

obj = {
    _pick:pick,
    _dept:dept,
    _model:model    // this obj contains no brand object, because i have not selected anything from the brand dropdown
}

HTML：

<form name="populateForm">
<div class="dom_element">
    <label>Department</label>
    <input type="text" name="pick" id="pick">
</div>

<div class="dom_element">
    <label>Department</label>
    <select id="departmentSelect">
        <option value="0">Select Department</option>
        <option value="122">Department-1</option>
        <option value="123">Department-2</option>
        <option value="124">Department-3</option>
        <option value="125">Department-4</option>
        <option value="126">Department-5</option>
    </select>
</div>

<div class="dom_element">
    <label>Brands</label>
    <select id="brandSelect">
        <option value="0">Select Brand</option>
        <option value="212">Brand-1</option>
        <option value="213">Brand-2</option>
        <option value="214">Brand-3</option>
        <option value="215">Brand-4</option>
        <option value="216">Brand-5</option>
    </select>
</div>

<div class="dom_element">
    <label>Model</label>
    <select id="modelSelect">
        <option value="0">Select Model</option>
        <option value="328">Model-1</option>
        <option value="324">Model-2</option>
        <option value="326">Model-3</option>
        <option value="325">Model-4</option>
        <option value="322">Model-5</option>
    </select>
</div>

</form>
<button class="ApplyFilter">Apply</button>

JS：

$(document).ready(function(){
    $('.ApplyFilter').on('click',function(){
        var paramObj = {};
        var pick = $('#pick').val();
        var dept = $('#departmentSelect').val();
        var brand = $('#brandSelect').val();
        var model = $('#modelSelect').val();

    if(pick != ''){
        paramObj = {
            _pick:pick
        }
    }

    if(dept > 0){
        paramObj = {
            _dept:dept
        }
    }

    if(brand > 0){
        paramObj = {
            _brand:brand
        }
    }

    if(model > 0){
        paramObj = {
            _model:model
        }
    }

    /*
        this is the object i am expecting at the end, if any input does not have any value then that should not be in this object
        paramObj = {
            _pick:pick,
            _dept:dept,
            _brand:brand,
            _model:model
        }
    */

    var urlParams = $.params(paramObj);

    if(urlParams.length > 0){
        $.ajax({
            type: "POST",
            url: "/api/getMydata/?"+urlParams,
            success:function(response){
                console.log(response.responseData);
            }
        })
    }

    });
});

Answer 1

而不是

paramObj = {
    _pick:pick
}

只是做

paramObj._pick = pick;

您正在执行此操作的当前方式，paramObj对象只是在每个if语句中重置。

如何通过对象构造url参数

1 个答案: