如何通過對象構造url參數

我正在嘗試爲從輸入元素中選擇的值構造url參數。如何通過對象構造url參數

例如：我有一個頁面，其中有一個文本輸入字段和3個選擇字段（名稱，部門，品牌，型號），首先我將輸入值來命名文本字段，然後我將選擇值從部門下拉菜單，然後我不會選擇品牌下拉列表中的任何內容，然後我將從模型下拉列表中選擇一些值，最後，當我按提交時，用戶輸入的值應該放入對象的密鑰對中，並生成url params與$ .params（obj）並附加到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); 
      } 
     }) 
    } 

    }); 
});

來源

2017-10-12 Mithun Raikar

不要使用'='來設置參數，因爲您將變量'paramObj'分配給只有一個參數的新對象。使用類似'paramObj._paramName = ...'的東西。 – Titus

另外，jQuery函數是'param'而不是'params'。 – Titus

而不是

paramObj = { 
    _pick:pick 
}

只是做

paramObj._pick = pick;

你這樣做是目前的方式，paramObj對象只是被重置每個if語句。

來源

2017-10-12 19:40:49 Nick

如何通過對象構造url參數

回答

相關問題