ot;=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return r[2];
return '';
}
我们打开产品详情页面product_details.html，从这个页面的原型就可以看到，它也有两个地方需要与服务器接口交互，一个是产品分类列表，这个同产品中心的代码一样，复制过来就可以了。另一个是产品信息的展示，需要通过ajax从服务器端获取指定的产品信息，然后再写入到页面中。
我们可以先在后台编辑好一个产品内容，如下图
将分类列表项删除，替换成<ol class="linenums" id="product_class"></ol>，为产品图片加上id：<img style="width:400px; height:300px" src="" alt="..." class="thumbnail" id="front_cover_img">
删除产品信息展示内容，替换成：<div style="float:left; font-size: 16px" id="product_info"></div>
删除产品描述替换成：<div class="panel-body" id="content"></div>
在页面底部的java script中添加下面代码，效果就可以直接看到了。
$.ajax({
url: "/api/product_class/",
type: "GET",
dataType: 'json',
success: function (data) {
if (data.rows != null && data.rows.length > 0) {
for (var i in data.rows) {
var item = data.rows[i];
var html = ' <li><a href="/products.html?id=' + item.id + '">' + item.name + '</a></li>';
$("#product_class").append(html);
}
}
}
});
var id = getQueryString('id');
if (id != '') {
$.ajax({
url: "/api/product/" + id + "/",
type: "GET",
dataType: 'json',
success: function (data) {
if (data.state == 0) {
$("#front_cover_img").attr('src', data.data.front_cover_img);
var html = '产品名称：' + data.data.name + '<br><br>产品编号：' + data.data.code + '<br><br>产品规格：' + data.data.standard + '<br><br>保 质 期：' + data.data.quality_guarantee_period + '<br><br>产 地：' + data.data.place_of_origin + '<br><br>';
$("#product_info").append(html);
$("#content").append(data.data.content);
}
}
});
}
/*获取url中的参数*/
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return r[2];
return '';
}
</script>
到此，我们整个代码部分就全部完成了，接下来要做的就是服务器的部署工作了
本文对应的源码下载（完整代码）
版权声明：本文原创发表于 博客园，作者为 AllEmpty 本文欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则视为侵权。
python开发QQ群：669058475 作者博客：http://www.cnblogs.com/EmptyFS/