JavaScript动态显示列表

最新推荐文章于 2023-07-11 21:23:47 发布

原创最新推荐文章于 2023-07-11 21:23:47 发布 · 2.8k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #前端 #动态 #表

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用jQuery和AJAX实现的动态加载商品列表的方法。通过AJAX请求从服务器获取商品数据，然后使用jQuery动态地在网页上显示这些数据。文章详细展示了如何在HTML中预设商品展示模板，并在获取到数据后，利用正则表达式和字符串替换功能填充模板，最后将生成的HTML代码追加到指定的div元素中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script src="../bootstrap3/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
			//刷新页面，加载showList()的内容
        	$(function(){
        		showList();
        	}); 
        	//动态显示内容
        	function showList(){
				$("#hot-list").empty();//显示前 清空原列表
        		$.ajax({
                    "url":"/products/hot",//方法请求到/products/hot路径
                    "data":null,	//传过去的数据，现在没有 null 或者直接删除掉这行
                    "type":"get",//请求方式
                    "dataType":"json",//数据类型
                    "success":function(json) {
                    	var data=json.data;
                    	//遍历从服务器获取的数据json.data
                    	for(var i=0;i<data.length;i++){
                    		var div = '<div  class="col-md-12">'+
									'<div class="col-md-7 text-row-2"><a href="product.html?id=#{id}">#{title}</a></div>'+
									'<div class="col-md-2">￥#{price}</div>'+
									'<div class="col-md-3"><img src="#{image}/collect.png" class="img-responsive" /></div>'+
									'</div>'
							//用data[i].id去替换上面的占位符#{id}，以下类推
							div=div.replace("#{id}",data[i].id);
							div=div.replace("#{title}",data[i].title);
							div=div.replace("#{price}",data[i].price);
							div=div.replace("#{image}",data[i].image);
							// replace默认仅遇到的第一个对应字符串
							// 可以使用正则表达式，让replace替换所有对应字符串
							//div=div.replace(/#{id}/g,data[i].id);这里只有一个所以不用
							//id选择器拼接div（即上面的HTML代码）
							$("#hot-list").append(div);
                    	}
                    }
                  });
        	}
        </script>
       ```
       以下是HTML代码
       //只需要在显示代码的div的父级标签添加id="hot-list"
<div id="hot-list" class="panel-body panel-item">
	<div  class="col-md-12">
		//这块div只要写一个即可，其他的动态生成
		<div class="col-md-7 text-row-2"><a href="product.html">广博</a></div>
		<div class="col-md-2">¥23</div>
		<div class="col-md-3"><img src="../images/portal/00GuangBo1040A5GBR0731/collect.png" class="img-responsive" /></div>
</div>