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

这是我一次又一次尝试做的事情。我的数据库中有一列（名为

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=函数（）{
var ul=$（本）；
如果（！ul.hasClass（'zg-ul-select-type'））{
ul.addClass（“zg-ul-select-type”）；
}
//SVG箭头
变量arrowtype=''；
$（'li:first of type'，this）.addClass（'active'）.append（arrowtype）；
$（此）.on（'click'，'li'，函数（事件）{
//删除div#如果存在，则选中它
如果（$（'#选定--zg ul选择类型'）。长度）{
$（'#选定--zg ul选择类型'）。删除（）；
}
ul.之前（“”）；
所选变量=$（“#所选--zg ul选择类型”）；
$（'li#ul arrowtype'，ul）.remove（）；
ul.切换类（“活动”）；
ul.children（）.removeClass（'active'）；
$（this.toggleClass（'active'）；
var selectedText=$（this.text（）；
如果（ul.hasClass（'active'））{
selected.text（selectedText）.addClass（'active'）.append（箭头类型）；
}否则{
selected.text（“”）.removeClass（'active'）；
$（'li.active'，ul）.append（箭头类型）；
}
});
$（文档）。在（'单击'）上，函数（事件）{
if（$（'ul.zg ul select type'）。长度）{
if（！$（'ul.zg ul select type'）.has（event.target）.length==0）{
返回；
}否则{
$（'ul.zg ul select type'）。removeClass（'active'）；
$（'#selected--zg ul select type'）.removeClass（'active'）.text（''）；
$（'#ul arrowtype'）。删除（）；
$（'ul.zg-ul-select-type li.active'）。追加（箭头类型）；
}
}
});
};
$（'be select type'）.ulSelect（）
ul.zg-ul-select-type{
位置：相对位置；
大纲：无；
文本对齐：居中；
保证金：0自动；
宽度：250px；
边界半径：3px；
框大小：边框框；
光标：指针；
填充：0；
溢出：自动；
}
ul.zg-ul-select-type li{
大纲：无；
文本对齐：左对齐；
背景色：#fff；
显示：无；
填充：15px；
}
ul.zg-ul-select-type li.active{
对齐项目：居中；
边框：1px实心#ccc；
边界半径：3px；
颜色：#111；
显示器：flex；
证明内容：之间的空间；
}
ul.zg-ul-select-type.active li{
边界：无；
大纲：无；
盒影：无；
显示：块；
}
ul.zg-ul-select-type.active li：悬停{
背景#f1f1；
}
ul.zg-ul-select-type.active li.active：悬停{
背景#f1f1；
}
#已选择--zg ul选择类型{
大纲：无；
背景色：#fff；
保证金：0自动；
文本对齐：居中；
宽度：250px；
对齐项目：居中；
框大小：边框框；
颜色：#111；
显示器：flex；
证明内容：之间的空间；
}
#已选择--zg-ul-select-type.active{
边框：1px实心#ccc；
边界半径：3px；
填充：15px；
}


按类型筛选
狗
猫

在第一段代码中，当您试图获取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已添加一个代码段：


$（函数（）{
$.fn.ulSelect=函数（）{
var ul=$（本）；
如果（！ul.hasClass（'zg-ul-select-type'））{
ul.addClass（“zg-ul-select-type”）；
}
//SVG箭头
变量arrowtype=''；
$（'li:first of type'，this）.addClass（'active'）.append（arrowtype）；
$（此）.on（'click'，'li'，函数（事件）{
//删除div#如果存在，则选中它
如果（$（'#选定--zg ul选择类型'）。长度）{
$（'#选定--zg ul选择类型'）。删除（）；
}
ul.之前（“”）；
所选变量=$（“#所选--zg ul选择类型”）；
$（'li#ul arrowtype'，ul）.remove（）；
ul.切换类（“活动”）；
ul.children（）.removeClass（'active'）；
$（this.toggleClass（'active'）；
var selectedText=$（this.text（）；
如果（ul.hasClass（'active'））{
selected.text（selectedText）.addClass（'active'）.append（箭头类型）；
}否则{
selected.text（“”）.removeClass（'active'）；
$（'li.active'，ul）.append（箭头类型）；
/*AJAX获取请求*/
if（！$（this）.is（'li:first of type'））{
$.ajax({
键入：“get”，
url:“{{$petname->pet_code}}”，
数据：{'search'：selectedText}，
成功：功能（数据）{
$（“#ajax搜索结果”）.html（数据）；
}
});
}
/*AJAX获取请求结束*/
}
});
$（文档）。在（'单击'）上，函数（事件）{
if（$（'ul.zg ul select type'）。长度）{
if（！$（'ul.zg ul select type'）.has（event.target）.length==0）{
返回；
}否则{
$（'ul.zg ul select type'）。removeClass（'active'）；
$（'#selected--zg ul select type'）.removeClass（'active'）.text（''）；
$（'#ul arrowtype'）。删除（）；
$（'ul.zg-ul-select-type li.active'）。追加（箭头类型）；
}
}
});
};
$（'be select type'）.ulSelect（）；
});
ul.zg-ul-select-type{
位置：相对位置；
大纲：无；
文本对齐：居中；
保证金：0自动；
宽度：250px；
边界半径：3px；
框大小：边框框；
光标：指针；
填充：0；
溢出：自动；
}
ul.zg-ul-select-type li{
大纲：无；
文本对齐：左对齐；
背景色：#fff；
显示：无；
填充：15px；
}
ul.zg-ul-select-type li.active{
对齐项目：居中；
边框：1px实心#ccc；
边界半径：3px；
颜色：#111；
显示器：flex；
证明内容：