ajax 循环追加HTML

最新推荐文章于 2021-09-23 10:18:47 发布

转载最新推荐文章于 2021-09-23 10:18:47 发布 · 275 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ssx314/p/10251727.html

文章标签：

#php #json #javascript #ViewUI

本文介绍了一种使用jQuery和AJAX实现的移动端商品加载与展示方法。通过点击图标触发AJAX请求，从服务器获取商品信息并动态填充到页面中。详细展示了如何利用jQuery遍历返回的商品数据，并将其格式化为友好的HTML结构进行展示。

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

 1 $(".iconfont").click(function(){
 2     page=$("input[name='count']").val();
 3     typeid=$("input[name='typeid']").val();                                            
 4     $.ajax({url:"index.php?mod=mobile&act=goods&type=ajax",
 5         type:'GET',
 6         dataType:"json",
 7         data:{"page":page,"typeid":typeid},
 8         success:function(data){
 9             if(data.state==1){                                                   
10                 tableContent="";
11                 $.each(data.msg,function(i){
12                     var commentInfo = data.msg[i];
13                     var num = i+1;
14                     tableContent += '<a href="javascript:;" class="aui-flex-links-item">';
15                     tableContent += '<div class="aui-flex-links-img">';
16                     tableContent += '<img src="'+commentInfo.goods_thumb+'">';
17                     tableContent += '</div>';
18                     tableContent += '<div class="aui-flex-links-text">'+commentInfo.goods_name;
19                     tableContent += '<br>';    
20                     tableContent += '<span style="color:#ff5647">';    
21                     tableContent += '<i>￥</i>'+commentInfo.shop_price;    
22                     tableContent += '</span></div>';    
23                     tableContent += '</a>';                                                      
24                 })
25                 $(".aui-flex-links").append(tableContent);
26                 $("input[name='count']").val(++page);
27             }else{                                                   
28                 $("#show").append(data.msg);
29                 $('.iconfont').css("display","none")
30             }
31         }
32     });
33 })