在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) {
       }
   });
});