index.php
<div id="commodity-list"> <div class="close">x</div> <div class="container"> <!-- 此为商品清单Template --> </div> </div></div><!-- 商品清单Template部分 --><script id="commodity-list-item-template" type="text/x-handlebars-template"> <img src="{{img}}" alt="{{img}}"> <div class="content"> <div class="book-name">{{book_name}}</div> <div class="author">作者:<span>{{author}}</span></div> <div class="Publishing-house">出版社:<span>{{Publishing_house}}</span></div> <div class="Publication-date">出版日期:<span>{{Publication_date}}</span></div> <div class="price">NT${{price}}</div> <div class="button" data-id="{{id}}">加入购物车</div> </div></script>
action.js
var panel={ el: '#panel', }; var commodity_list_template = $('#commodity-list-item-template').html(); var commodity_list_template_compile = Handlebars.compile(commodity_list_template); $(panel.el) .on('click', '#commodity li', function(e) {//开启商品书单清单 e.preventDefault(); var id = $(this).data('id'); $(commodity_list.el).addClass('open'); $.post("commodity_list.php", {id:id}, function (data, textStatus, jqXHR) { $(commodity_list.el).find('.container').html(''); $(commodity_list.el).find('.container').append(commodity_list_template_compile(data)); }); })
commodity_list.php
<?phpheader('Content-Type: application/json; charset=utf-8');include('../../../db.php');try {$pdo = new PDO("mysql:host=$db[host];dbname=$db[dbname];port=$db[port];charset=$db[charset]", $db['username'], $db['password']);} catch (PDOException $e) {echo "Database connection failed.";exit;}$sql = 'SELECT id, book_name,author, Publishing_house, Publication_date, price, img FROM commodity WHERE id=:id';$statement = $pdo->prepare($sql);$statement->bindValue(':id', $_POST['id'], PDO::PARAM_INT);$result = $statement->execute();$commodity = $statement->fetch(PDO::FETCH_ASSOC);if($result){ echo json_encode(['id'=>$commodity['id'], 'book_name'=> $commodity['book_name'], 'author'=> $commodity['author'],'Publishing_house'=> $commodity['Publishing_house'] ,'Publishing_date'=> $commodity['Publishing_date'],'price'=> $commodity['price'],'img'=> $commodity['img']]);}?>