使用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物件。