时间戳

首页 > 解决方案 > 如何在 Spring Boot、JavaScript、Ajax 和 MySql 中为电子商务实现多个产品过滤器？

javascript - 如何在 Spring Boot、JavaScript、Ajax 和 MySql 中为电子商务实现多个产品过滤器？

问题描述

我正在使用 Spring Boot 开发电子商务 Web 应用程序。所以我有添加或应用多个产品过滤器的功能。所以有多个复选框，用户可以通过这些复选框根据他/她的愿望从商店中过滤或搜索产品来选中或选择复选框。所以，我卡住了应该如何从前端完成。所以过滤器选项是（类别、标签、子类别、最低和最高价格、折扣和流行度）。假设用户检查了类别，则 div 内的产品应仅根据所选类别显示，如果用户已检查类别以及价格范围。例如，类别 -> 蛋糕和最低价格 -> 300 卢比和最高价格 -> 1000 卢比。所以产品应该按照这个来展示（蛋糕只在300卢比到1000卢比的价格范围内）。

下面是我的 JavaScript 函数，它包含所有复选框和输入值：

    function updatelisting(){
                var min = document.getElementById("minprice").value;
                var max = document.getElementById("maxprice").value; 
                var c = new Array();
                var t = new Array();
                var s = new Array();
                var sp = new Array();
                var d = new Array();
                $('[id="checkbox1"]').each(function(i,e){
                    if($(e).is(':checked')){
                        c.push(e.value);
                    }
                })
                var category = c.toString();
                $('[id="checkbox2"]').each(function(i,e){
                    if($(e).is(':checked')){
                        t.push(e.value);
                    }
                })
                var tag = t.toString();
                $('[id="checkbox3"]').each(function(i,e){
                    if($(e).is(':checked')){
                        s.push(e.value);
                    }
                })
                var subcategory = s.toString();
                $('[id="checkbox5"]').each(function(i,e){
                    if($(e).is(':checked')){
                        sp.push(e.value);
                    }
                })
                var specialtag = sp.toString();
                $('[id="checkbox6"]').each(function(i,e){
                    if($(e).is(':checked')){
                        d.push(e.value);
                    }
                })
                var discount = d.toString();
                var url = "api/searchbyfilter";
                $.post(url,{
                    category : category,
                    tag : tag,
                    subcategory : subcategory,
                    specialtag : specialtag,
                    discount : discount,
                    min : min,
                    max : max, 
                }, function(data, status) {
                    if (data.status == "OK") {
                        if (data.statusCode == 1) {
                            console.log(data.response);
                            var list = data.response;
                            if(list.length == 0 || list.length == null){
                                alert("No product found");
                            }else{
                                $("#shop-1").html(selecttab(<%=pagelength%>));
                            }
                        } else {
                            var error = data.responseMessage;
                            swal(error, "", "error");
                        }
                    } else {
                        var error = data.responseMessage;
                        swal(error, "", "error");
                    }
                });
            }

如果有人有建议或解决方案，将对我有所帮助。你可以问我任何疑问。

显示过滤器的屏幕截图

显示过滤器的屏幕截图

标签： javascriptjqueryajaxspring-boote-commerce

解决方案

当您想触发您定义的某些代码时，您可以使用事件侦听器。

例如，当您想在单击按钮时打印“Hello World”时，您可以在按钮上添加单击事件侦听器

const button = $('#button');

button.on('click', function() {
    console.log('Hello World!');
});

上面的代码将打印“Hello World！” 每当您单击按钮时。因此，以相同的方法，您可以在过滤器上添加更改事件，即复选框

const checkbox = $('#checkbox');

checkbox.on('change', function() {
    // The function you defined
    updatelisting();
});

推荐阅读