javascript - 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)

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

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

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

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

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

Answer 1

我认为你的问题是你总是只能得到一个 key (如果存在，如果它不存在，那么代码就会中断，因为它是未定义的)。

您应该遍历所有 key ，这样即使您没有 key 也是安全的 - 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;