在jQuery ajax中傳遞多個輸入字段的值？

Question

我有多個輸入字段，例如

  <p>Filter by gender</p>
  <select class="filter-users">
     <option value="female">Female</option>
     <option value="male">Male</option>
   </select>
   <p>Filter by city</p>
      <input class="filter-users" type="text" name="city">

如何使用這些輸入中的一個或全部創建GET請求網址

$.ajax({
  url: "/users/filter",
  type: "get", 
  data: { 
    city: city, 
    gender: gender
  },
  success: function(response) {

  }
});

每次更改過濾器輸入時，如何發出Ajax請求？ 例如，在更改選項時發送新請求，或者輸入了文本輸入？ 所以我想解釋的是，沒有提交按鈕。 每當這些字段之一發生更改時，都需要發出請求

Answer 1

您可以使用serializeArray ，如下所示：

$.ajax({
  url: "/users/filter",
  type: "get", 
  data: $("form").serializeArray(),
  success: function(response) {
  }
});

或者，如果不需要JSON，但需要URL編碼的參數，也可以使用serialize 。

Answer 2

為此，“如何每次更改過濾器輸入時都發出ajax請求”-

$('input.filter-users').on('change', function(){
   $.ajax({
     url: "/users/filter",
     type: "get", 
    data: $("form").serializeArray(),
    success: function(response) {
       }
   });
});