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

这是我一次又一次尝试做的事情。我在名为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语句，并使用=获取和过滤$request的值。

基本上，此问题的正确答案是向控制器创建AJAX请求。

参考方案

在您的第一段代码中，当您尝试获取li元素的“值”时，必须使用.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添加了一个代码段：

$(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();

});

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>

在JavaScript函数中转义引号 - javascript

我正在尝试将变量传递给javascript函数。根据用户的选择，它可以是文本或图像。这里已经讨论了类似的问题，但我无法解决。在php中，我这样编码：if ($choice == 1) { $img = '<img src = "../folder/'.$_SESSION["img"].'�…

打印二维阵列 - javascript

我正在尝试打印子元素。在this example之后。怎么做？。$myarray = array("DO"=>array('IDEAS','BRANDS','CREATIVE','CAMPAIGNS'), "JOCKEY"=>a…

使用JS和PHP更改弹出窗口背景图像 - javascript

我有一个JS函数：function zoom(now) { document.getElementById("popup").style.display = "block"; document.getElementById("photos").style.backgroundImage = …

变更事件时道具无法正常工作 - javascript

我有一些代码，当用户从下拉列表中选择一个项目时，这会触发一个change事件，然后调用php页面进行处理。首次加载页面时，我选择一个项目，并在触发change事件时，这应更改所选select输入的占位符并禁用相同的输入：“＃box_ffrtv”。但是，发生的事情是更改仅在我在下拉菜单中进行了第二选择之后才发生，然后更改了占位符并禁用了输入。我对jquery还…

如何在没有for循环的情况下在Javascript中使用Django模板标签 - javascript

我想在JavaScript中使用模板变量：我的问题是在javascript代码中使用for循环，for循环之间的所有事情都会重复..但我不想要....下面粘贴了我的代码..有人可以告诉我更好的方法吗这..因为这看起来很丑..这是我的代码： {% block extra_javascript %} <script src="/static/js…