使用jQuery实现简单的组件化

最新推荐文章于 2023-01-10 15:03:54 发布

FKDXHS

最新推荐文章于 2023-01-10 15:03:54 发布

阅读量6.3k

点赞数

分类专栏： Javascript jQuery 文章标签： jquery html ajax url 服务器

本文链接：https://blog.csdn.net/FKDXHS/article/details/78839979

版权

本文介绍了如何利用jQuery通过AJAX获取HTML模板文件内容，实现组件化的基础方法，帮助理解组件效果的实现原理。

摘要由CSDN通过智能技术生成

使用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));//调用匹配关键