Question

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

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

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，则已经选择了黑色，事情就会失败，并且由于显而易见的原因，因为代码似乎没有允许它。

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

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;

jQuery将多个过滤器参数添加到url

1 个答案: