Laravel - 创建用于过滤SQL数据库的AJAX过滤器

Question

这是我一次又一次尝试做的事情。我的数据库中有以下列（名为type），名为pets：

type 
DOG 
DOG 
CAT 
CAT 
DOG

我要做的是创建一个过滤器，所以我可以选择是否只显示狗，只显示猫或两者。这应该是现场（使用AJAX） - 所以当我选择我想要的过滤器时，我不必重新加载网页。

我已经为AJAX请求提出了这个问题：

$(document).ready(function() {
    $('li.active').on('click', function() {
        $value=$(this).val();
        $.ajax({
            type : 'get',
            url  : '{{$petname->pet_code}}',
            data : {'search':$value},
            success:function(data) {
                $('#results-of-ajax-search').html(data);
            }
        });
    });
});

遗憾的是，这并没有按预期运作。我猜我无法定位所选过滤器的必要值。我将此用于此问题的前端部分：

$.fn.ulSelect = function() {
  var ul = $(this);

  if (!ul.hasClass('zg-ul-select-type')) {
    ul.addClass('zg-ul-select-type');
  }
  // SVG arrow
  var arrowtype = '<svg id="ul-arrowtype" xmlns="http://www.w3.org/2000/svg" version="1.1" width="10" height="10" viewBox="0 0 32 32"><line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/><path d="M4.131 8.962c-0.434-0.429-1.134-0.429-1.566 0-0.432 0.427-0.432 1.122 0 1.55l12.653 12.528c0.434 0.429 1.133 0.429 1.566 0l12.653-12.528c0.432-0.429 0.434-1.122 0-1.55s-1.136-0.429-1.566-0.002l-11.87 11.426-11.869-11.424z" fill="#111"/></svg>';
  $('li:first-of-type', this).addClass('active').append(arrowtype);
  $(this).on('click', 'li', function(event) {

    // Remove div#selected if it exists
    if ($('#selected--zg-ul-select-type').length) {
      $('#selected--zg-ul-select-type').remove();
    }
    ul.before('<div id="selected--zg-ul-select-type">');
    var selected = $('#selected--zg-ul-select-type');
    $('li #ul-arrowtype', ul).remove();
    ul.toggleClass('active');
    ul.children().removeClass('active');
    $(this).toggleClass('active');

    var selectedText = $(this).text();
    if (ul.hasClass('active')) {
      selected.text(selectedText).addClass('active').append(arrowtype);
    } else {
      selected.text('').removeClass('active');
      $('li.active', ul).append(arrowtype);
    }
  });
  $(document).on('click', function(event) {
    if ($('ul.zg-ul-select-type').length) {
      if (!$('ul.zg-ul-select-type').has(event.target).length == 0) {
        return;
      } else {
        $('ul.zg-ul-select-type').removeClass('active');
        $('#selected--zg-ul-select-type').removeClass('active').text('');
        $('#ul-arrowtype').remove();
        $('ul.zg-ul-select-type li.active').append(arrowtype);
      }
    }
  });
};
$('#be-select-type').ulSelect();

ul.zg-ul-select-type {
  position: relative;
  outline: none;
  text-align: center;
  margin: 0 auto;
  width: 250px;
  border-radius: 3px;
  box-sizing: border-box;
  cursor: pointer;
  padding: 0;
  overflow: auto;
}

ul.zg-ul-select-type li {
  outline: none;
  text-align: left;
  background-color: #fff;
  display: none;
  padding: 15px;
}

ul.zg-ul-select-type li.active {
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: #111;
  display: flex;
  justify-content: space-between;
}

ul.zg-ul-select-type.active li {
  border: none;
  outline: none;
  box-shadow: none;
  display: block;
}

ul.zg-ul-select-type.active li:hover {
  background: #f1f1f1;
}

ul.zg-ul-select-type.active li.active:hover {
  background: #f1f1f1;
}

#selected--zg-ul-select-type {
  outline: none;
  background-color: #fff;
  margin: 0 auto;
  text-align: center;
  width: 250px;
  align-items: center;
  box-sizing: border-box;
  color: #111;
  display: flex;
  justify-content: space-between;
}

#selected--zg-ul-select-type.active {
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="data-control">
  <ul id="be-select-type" tabindex="0">
	<li><span class="filter-text" id="filter-type-reset">Filter by Type</span></li>
    <li><span class="filter-text" id="filter-type-cat">Dog</span></li>
    <li><span class="filter-text" id="filter-type-dog">Cat</span></li>
</ul>
</span>

如果您运行该代码，它会创建前端选择列表，并在列表中的选定值中添加active类。

对于Laravel后端控制器，我猜你必须在where查询中添加DB语句，并使用=来获取和过滤{{1}的值1}}。

基本上，这个问题的正确答案是为我的控制器创建一个AJAX请求。

Answer 1

在您的第一个代码块中，当您尝试获取li元素＆＃34;＆＃34; value＆＃34;你必须使用.text（） - 如果你想获得文本或.html（） - 如果你想得到内在的HTML：

$(document).ready(function() {
    $('li.active').on('click', function() {
        var $value=$(this).text();
        $.ajax({
            type : 'get',
            url  : '{{$petname->pet_code}}',
            data : {'search':$value},
            success:function(data) {
                $('#results-of-ajax-search').html(data);
            }
        });
    });
});

<强>编辑：

作为您的问题的快速解决方案，您可以删除上面的代码块并使用您的前端部分代码进行更改。 A添加了一个片段：

＆＃13;

＆＃13;

$(function(){

$.fn.ulSelect = function() {
  var ul = $(this);

  if (!ul.hasClass('zg-ul-select-type')) {
    ul.addClass('zg-ul-select-type');
  }
  // SVG arrow
  var arrowtype = '<svg id="ul-arrowtype" xmlns="http://www.w3.org/2000/svg" version="1.1" width="10" height="10" viewBox="0 0 32 32"><line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/><path d="M4.131 8.962c-0.434-0.429-1.134-0.429-1.566 0-0.432 0.427-0.432 1.122 0 1.55l12.653 12.528c0.434 0.429 1.133 0.429 1.566 0l12.653-12.528c0.432-0.429 0.434-1.122 0-1.55s-1.136-0.429-1.566-0.002l-11.87 11.426-11.869-11.424z" fill="#111"/></svg>';
  $('li:first-of-type', this).addClass('active').append(arrowtype);


  $(this).on('click', 'li', function(event) {

    // Remove div#selected if it exists
    if ($('#selected--zg-ul-select-type').length) {
      $('#selected--zg-ul-select-type').remove();
    }
    ul.before('<div id="selected--zg-ul-select-type">');
    var selected = $('#selected--zg-ul-select-type');
    $('li #ul-arrowtype', ul).remove();
    ul.toggleClass('active');
    ul.children().removeClass('active');
    $(this).toggleClass('active');

    var selectedText = $(this).text();
    if (ul.hasClass('active')) {
      selected.text(selectedText).addClass('active').append(arrowtype);
    } else {
      selected.text('').removeClass('active');
      $('li.active', ul).append(arrowtype);
      /* AJAX GET REQUEST */
      if(!$(this).is('li:first-of-type')){
        $.ajax({
            type : 'get',
            url  : '{{$petname->pet_code}}',
            data : {'search':selectedText},
            success:function(data) {
                $('#results-of-ajax-search').html(data);
            }
        });
      }
      /* AJAX GET REQUEST ENDS */
    }

  });

  $(document).on('click', function(event) {
    if ($('ul.zg-ul-select-type').length) {
      if (!$('ul.zg-ul-select-type').has(event.target).length == 0) {
        return;
      } else {
        $('ul.zg-ul-select-type').removeClass('active');
        $('#selected--zg-ul-select-type').removeClass('active').text('');
        $('#ul-arrowtype').remove();
        $('ul.zg-ul-select-type li.active').append(arrowtype);
      }
    }
  });

};
$('#be-select-type').ulSelect();

});

＆＃13;

ul.zg-ul-select-type {
  position: relative;
  outline: none;
  text-align: center;
  margin: 0 auto;
  width: 250px;
  border-radius: 3px;
  box-sizing: border-box;
  cursor: pointer;
  padding: 0;
  overflow: auto;
}

ul.zg-ul-select-type li {
  outline: none;
  text-align: left;
  background-color: #fff;
  display: none;
  padding: 15px;
}

ul.zg-ul-select-type li.active {
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: #111;
  display: flex;
  justify-content: space-between;
}

ul.zg-ul-select-type.active li {
  border: none;
  outline: none;
  box-shadow: none;
  display: block;
}

ul.zg-ul-select-type.active li:hover {
  background: #f1f1f1;
}

ul.zg-ul-select-type.active li.active:hover {
  background: #f1f1f1;
}

#selected--zg-ul-select-type {
  outline: none;
  background-color: #fff;
  margin: 0 auto;
  text-align: center;
  width: 250px;
  align-items: center;
  box-sizing: border-box;
  color: #111;
  display: flex;
  justify-content: space-between;
}

#selected--zg-ul-select-type.active {
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="data-control">
  <ul id="be-select-type" tabindex="0">
	<li><span class="filter-text" id="filter-type-reset">Filter by Type</span></li>
    <li><span class="filter-text" id="filter-type-cat">Dog</span></li>
    <li><span class="filter-text" id="filter-type-dog">Cat</span></li>
</ul>
</span>

＆＃13;

＆＃13;

＆＃13;