我正在为我的客户构建一个自定义电子商务网站,并且我决定在他们选择一个选项时使用 Ajax 重新填充产品布局。那么例如...
我有一个颜色列表。红色、蓝色、绿色等。当他们单击其中一种颜色时,我想将颜色的 ID 传递给 ajax 函数。它将转到一个 php 函数,在该函数中它会根据他们选择的颜色拉出一个新的产品列表。它返回一个 JSON 对象,其中包含所有产品。这部分我可以处理。
所以这是我需要帮助的部分。我以前从未这样做过,所以我想知道,在返回 JSON 对象后如何布局我的产品表?显然我不能将 JSON 对象传递回 php 并这样做,所以我是否只需使用 jquery 重新创建我的产品表,为 JSON 对象编写一个 foreach 循环,然后用该内容替换我的容器 div?
你通常会如何专业地去做这件事?
回应评论:
好吧,我已经在初始页面加载时用 PHP 编写了模板。我正在使用 ajax,所以我不必重新加载页面。
这是我的PHP
<?php foreach($products as $p): ?>
<div class="indProduct">
<?php foreach($images as $img): ?>
<?php if($img['productId'] == $p['id']): ?>
<div class="prodImg"><img src="<?php echo base_url(); ?>images/products/<?php echo $img['image']; ?>" alt="<?php echo $p['productTitle']; ?>" /></div>
<?php endif; ?>
<?php endforeach; ?>
<?php if($p['salePrice'] != 0.00): ?>
<div class="prodSaleBanner"></div>
<?php endif; ?>
<div class="prodTitle"><?php echo $p['productTitle']; ?></div>
<div class="prodPrice">
<?php if($p['salePrice'] != 0.00): ?>
$<?php echo number_format($p['salePrice'], 2, '.', ''); ?>
<?php else: ?>
$<?php echo number_format($p['price'], 2, '.', ''); ?>
<?php endif; ?>
<br />
<div class="original-price">
<?php if($p['salePrice'] != 0.00): ?>
$<span style="text-decoration:line-through;"><?php echo number_format($p['price'], 2, '.', ''); ?></span>
<span class="savings">
<?php
$savings = $p['price'] - $p['salePrice'];
echo 'SAVE: '.number_format($savings, 2, '.', '');
?>
</span>
<?php endif; ?>
</div>
</div>
<div class="prodAddButton">
<a href="<?php echo $p['id']; ?>" id="addToCartButton" class="storeButton">Add To Cart</a>
</div>
</div>
<?php endforeach; ?>
所以我的计划是获取 JSON 对象,然后基本上使用 jquery 和 json 而不是 PHP 重做 ajax 成功请求中的所有上述代码。这是一种很难做到的方法吗?