jQuery向url添加多个过滤器参数

Question

我有多组用于过滤搜索结果的复选框。例如，搜索衬衫将第一组作为颜色，包括黑色、蓝色、红色和第二组作为尺寸，包括小、中、大等。标准的东西...

在进行搜索并应用过滤器后，此示例的 url 将如下所示：

www.xzy.dev/search?keywords=shirt&colors=red,black&sizes=small,medium

这将返回与关键字搜索匹配的所有项目，以及颜色（红色和黑色）和尺寸（小号和中号）的过滤器。

我已经完成了所有的后端，但在前端方面我并不是很出色......

下面的代码正是我想要的，除了它有我在下面解释的情况的缺陷。

<script type="text/javascript">
      function GetFilters() {
          console.log("rom");
          $('input[type="checkbox"]').on('change', function (e) {
              var data = {},
                  fdata = [],
                  loc = $('<a>', { href: window.location })[0];
              $('input[type="checkbox"]').each(function (i) {
                  if (this.checked) {
                      if (!data.hasOwnProperty(this.name)) {
                          data[this.name] = [];
                      }
                      data[this.name].push(this.value);
                  }
              });
              // get the key
              var key = Object.keys(data)[0];
              // and the data
              // it works to without joining
              var fdata = key+"="+data[key].join(',');
              // and if you wanna strip the whitespaces
              // use fdata = fdata.replace(/\s/g,"");
              $.ajax({
                type: "POST",
                url: "/ajax/get",
                data: {
                      "_token": "{{ csrf_token() }}",
                      "fdata": fdata
                    },
                success: function (response) {
                  $('#d2d-results').html(response);
                }
              });
              if (history.pushState) {
                  history.pushState(null, null, loc.pathname + '?' + fdata);
              }
          });
      }
      window.onload = GetFilters;
  </script>

该代码在大多数情况下都有效。当我单击一个复选框时，它会附加到 url 并完成 ajax 请求。效果很好...

但我在使用上述代码时遇到的问题是，当我取消选中最后一个复选框以删除最终过滤器时，它会停留在 url 中，并抛出错误：

Uncaught TypeError: Cannot read property 'join' of undefined
    at HTMLInputElement.<anonymous> (677)
    at HTMLInputElement.dispatch (jquery.min.js:3)
    at HTMLInputElement.q.handle (jquery.min.js:3)

其次，代码仅在我使用一个过滤器组时有效。如果我尝试从另一个过滤器组中单击一个复选框，而已经从第一个过滤器组中进行了选择，例如，如果颜色=红色，黑色已经被选中，事情就会失败，并且出于明显的原因，因为代码似乎不允许它。

如何修改它以添加多个查询组？如何从我的颜色组中单击红色和黑色，从我的尺寸组中单击小号和中号并显示 url：

www.xzy.dev/search?keywords=shirt&colors=red,black&sizes=small,medium

但如果我不想指定颜色，也可以删除实际查询？

www.xzy.dev/search?keywords=shirt&sizes=small,medium

Answer 1

我认为你的问题是你总是只得到一个键（如果存在，如果它不存在，那么代码会因为它未定义而中断）。

你应该遍历所有的键，这样如果你没有键，你也是安全的 - fdata 将保持为空。

<script type="text/javascript">
  function GetFilters() {
      $('input[type="checkbox"]').on('change', function (e) {
          var data = {},
              fdata = [],
              loc = $('<a>', { href: window.location })[0];
          $('input[type="checkbox"]').each(function (i) {
              if (this.checked) {
                  if (!data.hasOwnProperty(this.name)) {
                      data[this.name] = [];
                  }
                  data[this.name].push(this.value);
              }
          });
          // get all keys.
          var keys = Object.keys(data);
          var fdata = "";
          // iterate over them and create the fdata
          keys.forEach(function(key,i){
              if (i>0) fdata += '&'; // if its not the first key add &
              fdata += key+"="+data[key].join(',');
          });
          $.ajax({
            type: "POST",
            url: "/ajax/get",
            data: {
                  "_token": "{{ csrf_token() }}",
                  "fdata": fdata
                },
            success: function (response) {
              $('#d2d-results').html(response);
            }
          });
          if (history.pushState) {
              history.pushState(null, null, loc.pathname + '?' + fdata);
          }
      });
  }
  window.onload = GetFilters;