【发布时间】：2017-08-05 15:23:44
【问题描述】：
这是我一次又一次尝试做的事情。我的数据库中有以下列（名为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 请求。
【问题讨论】：
标签： javascript php jquery ajax laravel