使用Ajax取得查询与筛选结果

        data: {
            "key": $("#SearchKeyInput").val(),
            "Category": $("#SearchOptionCategory option:selected").val(),
            "Min": $("#SearchKeyInputMinPrice").val(),
            "Max": $("#SearchKeyInputMaxPrice").val(),
            "BreakFast": $('#CheckboxForBreakFast:checked').val(),
            "Lunch": $('#CheckboxForLunch:checked').val(),
            "Dinner": $('#CheckboxForDinner:checked').val()

在Ajax传递参数进去後端时,建立一个Data,里面的key与Value分别为上面七样从前端节点选取的值,而Key则是我们自己设定的,在後端拿取参数时,就必须拿取前方的Key,而型别也要打对。

再来我们会设置前端的分页:


            var itemPerPage = 8;
            var HowManyPages = (data.length / itemPerPage);//40/8 =5页;

先设定每页以8个item为一个单位,
计算 如果我的data回传长度有40,那除以8个品项,
我总共的页面会是5页。

不过如果总品项大於40呢?

            var showItems = 0;
            if (data.length < itemPerPage)
            {
                showItems = data.length;
            }
            else
            {
                showItems = (data.length / HowManyPages);
            }

这里先宣告一个 showItems变数为容器,
如果 所有品项 小於 我每页所设定的item(8),
秀出的所有品项就只会有我的 最大长度(比如 7项)。

而不是呢?
就会依照刚刚设定的数字去做处理,一页要秀的数量(8) = 总品项(40) / 总共有几页(5页);

pdtItem = data;

这是我们所要拿到的物件,在function外面,我们也必须宣告一个

var pdtItem= null;

为容器。 以这样处理,我们之後输出的所有字串pdtItem,在编译的时候就会都是物件。

再来宣告一个Label容器装我们的节点字串。

var label = `<section class='featured spad'><p>搜寻结果:共有 ${data.length} 笔商品</p><div class='container'><div>`;
            label += "<div class='row featured__filter' id='pagesForForLoop'>";

上面为我们一开始设定的节点框架,以及物件总长(总商品数目)。

再来我们进行回圈,把从0到最後的物件都取出来。

for (let i = 0; i < showItems; i++) {
                label += `
                          <div class="col-lg-3 col-md-4 col-sm-6 mix oranges fresh-meat">
                          <div class="featured__item">
                          <div class="featured__item__pic set-bg" style="background-image: url(${data[i].tProduct.cPicture.replace("~", "")})">
                          <ul class="featured__item__pic__hover">
                          <li><a href="javascript: void(0)" onclick="addCart(pdtItem[${i}].tProduct)"><i class="fa fa-shopping-cart"></i></a></li>
                          </ul>
                          <ul class="start_for_homepage">`

上面会取出 tProduct物件中的 Picture,再用replace将~ 给空字串化,
创立一个 onclick事件,href:javascript: void(0),则是让点击後的画面不要乱跑。
onclick事件的参数,我们设定 取出物件[index]的tProduct物件,
所以传进addCart function的参数就会是一个tProduct型别的物件,里面会有所有tProduct物件所拥有的任何属性。

再来是一个商品的评分, 平均分数 如果 <= 0 就会是 0, 如果不是 就会是 int转化(总和/总数)。

let Average_message_adri = data[i].count <= 0 ? 0 : parseInt(data[i].sum / data[i].count)

第一个for回圈是平均分数有几个,我们就画几颗橘色的星星span上去,第二个for回圈是 5颗星-平均分数 ,若平均分数为3,可以取得2颗灰色的星星。

                for (let x = 0; x < Average_message_adri; x++) {
                    label += `<li><span class="fa fa-star checked" style="color: orange;font-size:25px""></span></li>`
                }
                for (let g = 0; g < 5 - Average_message_adri; g++) {
                    label += `<li><span class="fa fa-star checked" style="color: #d5d3cf;font-size:25px""></span></li>`
                }
                label += ` </ul>

再来放上制作时间的分钟数

<span class="product_time_yu">制作时间:${data[i].tProduct.cFinishedTime}分钟</span> `

下面则显示 我们要导向的商品页面超连结、商品价格以及商品的库存量

                label+=`</div>
                        <div class="featured__item__text">
                        <h6><a href="/ProductDetail/ProductData?id=${data[i].tProduct.cProductId}">${data[i].tProduct.cProductName}</a></h6>
                        <h5>$${data[i].tProduct.cPrice}</h5>
                        <h6>库存量 ${data[i].tProduct.cQuantity} </h6>
                        </div>
                        </div>
                        </div>`;
            }

顺便挂上 for回圈的结束括号

所有商品的结束标签

            label += "</ div>";
            label += "</ div>";
            label += "</div>";
            label += `<nav aria-label="Page navigation example">
            <ul class="pagination ">`;

再来是我们的分页连结

            for (var i = 0; i < HowManyPages; i++)
            {
                label += `<li class="page-item">
                <button type="button" class="page-link" onclick="pagesForSearch(${i})">${i + 1}</button>
                </li>`;
            }

结束区域的标签,把divforSearch节点下的东西全部替换成我们写好的label字串,
再挂上 ajax success的结束括号。


            label += `</ul>
                      </nav>`;
            label += "</ section>";

            $("#divforSearch").html(label);
        }

这样就完成了我们前端的传送参数,接收物件,节点展示,下一篇会讲解後端是怎麽把传进的参数,处理成可以用的data物件。


<<:  CMoney工程师战斗营weekly8

>>:  SQL语法疑问?

杂谈    

【把玩Azure DevOps】Day26 YAML格式以外的Pipeline传统编辑器(Classic Editor)

先前在「CI/CD从这里:设定第一个Pipeline(范本与编辑介面介绍)」这篇文章内容建立Pipe...

Day42. 范例:仿真Git (备忘录模式)

本文同步更新於blog 情境:让我们利用备忘录模式,实作一个仿真Git 首先定义Commit &...

Day 08. Zabbix 设定 SNMP 监控 Synology NAS DS920+

今天跟大家分享将Synology NAS DS920+透过SNMP加入监控 因为今年 Google ...

[Day 18 - webpack] 模组化开发好帮手 — 打包工具 webpack

为什麽要使用 webpack? 在前一篇文章提到,有愈来愈多开源套件,可以帮助我们加速开发。当功能愈...

[Day21]程序菜鸟自学C++资料结构演算法 – 杂凑搜寻法实作

前言:昨天讲解完了杂凑法的定义和,今天要来把它实际创建出来,这次用到的杂凑法要用之前学过的链结串列来...