使用jQuery實現簡單的組件效果
原理剖析:使用AJAX讀取HTML模板文件返回模板內容
//分頁載入JS代碼
function loadpage(murl){var res="頁面地址無效";$.ajax({url:murl,async:false,success:function(data){res=data}});return res}
//服務器請求且利用模板生成
var NewGoodsItemCache = "";
//商品展示模塊緩存,如果AJAX讀取過之後就不需要再次讀取直接調用模板文件;
function GetGoods(){
//獲取服務器數據
var ModelArr = new Array(
"{$imgsrc}",
"{$name}",
"{$contect}",
"{$money}",
"{$id}"
);
//獲取服務器傳回的數據
$.get("PHPpage/GetGoods.php",function(data){
data=eval(data);
if(data.length){
for(var i=0;data[i];i++){
var ValueArr=new Array(
data[i].goodsimage,
data[i].goodstitle,
data[i].goodscontect,
data[i].goodsmoney,
data[i].id
);
$(".goods").html($(".goods").html()+NewGoodsItem(ModelArr,ValueArr));//調用匹配關鍵字函數進行替換操作後,顯示到網頁指定位置
}
}
});
}
function NewGoodsItem(NGIarrM, NGIarrV) {
//新建一個商品
//NGIarrM 模板
//NGIarrV 參數
if(NewGoodsItemCache.length == 0) {
//模板文件緩存不存在,置入緩存
NewGoodsItemCache = loadpage("HtmlModelPage/GoodsModel1.html");
}
var ModHtml = NewGoodsItemCache;
for(var i = 0; i < NGIarrM.length; i++) {
ModHtml = ModHtml.replace(NGIarrM[i], NGIarrV[i]);
}//替換完畢
return ModHtml;//返回替換結果
};
<!--購物車模板代碼示例-->
<a href="#?num=0" onclick="GetBuyCar({$id});">
<div class="goods-list1">
<div class="goods-left">
<img src="{$imgsrc}" width="180px" height="180px"/>
</div>
<div class="goods-right">
<div class="goods-name">{$name}</div>
<div class="goods-contect">{$contect}</div>
<div class="goods-money">¥{$money}</div>
<div class="goods-buy">加入購物車</div>
</div>
</div>
</a>