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物件。
先前在「CI/CD从这里:设定第一个Pipeline(范本与编辑介面介绍)」这篇文章内容建立Pipe...
本文同步更新於blog 情境:让我们利用备忘录模式,实作一个仿真Git 首先定义Commit &...
今天跟大家分享将Synology NAS DS920+透过SNMP加入监控 因为今年 Google ...
为什麽要使用 webpack? 在前一篇文章提到,有愈来愈多开源套件,可以帮助我们加速开发。当功能愈...
前言:昨天讲解完了杂凑法的定义和,今天要来把它实际创建出来,这次用到的杂凑法要用之前学过的链结串列来...