php+jquery随机产品遍历到html

<div class="container">
   <div class="sx_condition">
      <div><span>全部：</span><a>T恤</a></div>
   </div>
   <div>
      <ul class="shop_list">
 
      </ul>
  </div>
</div>

@charset "utf-8";
*{ margin:0; padding:0;}
html,body{ margin:0; padding:0;}
ul li{list-style: none;}
a { text-decoration:none; color:#2d2f30; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -o-transition: all .3s linear; -ms-transition: all .3s linear; transition: all .3s linear; }
a:hover { background:#7ecbc8; color:#fff; }
.container{ max-width: 1200px;}
ul li{margin: 0 10px 10px 10px;}
ul li a{display: block; font-size: 14px; padding: 6px 8px; line-height: 18px;}
.sx_condition span{float:left;padding: 0 24px 0 10px; line-height: 30px;}
.sx_condition a{height: 30px; padding: 0 24px 0 10px; line-height: 30px; display: block; position: relative; float:left; margin: 0 10px 10px 0; color: #fff !important; font-size: 14px;  background: url(images/close1.png) 90% center no-repeat #7ecbc8;  }
.shop_list{display: block; clear: both;}
.shop_list li{ background: #fff; height: 327px; margin-bottom: 10px; margin-left: 12px; padding-bottom: 15px; width: 227px; float: left;}
.shop_list li img{ background-position: 50%; background-repeat: no-repeat; background-size: cover; border-bottom: 1px solid #eee; display: block; height: 228px; position: relative; width: 228px; z-index: 200; }
.goodsName{ height: 20px; line-height: 20px; margin-bottom: 5px; padding: 0 10px; text-align: center; width: 227px;}
.shopPrice{color: #f71;font-size: 16px;}

$(function(){
    function getJsonData(){
 
        $.ajax({
            type:'get',
            url:"/case-php/goods.php",
            data:{table:'goods'},
            dataType:"json",
            async: false,
            success:function(data){
                result = data.info;
 
            },error:function(e){
                console.log(e.responseText); //status
            }
        });
        return result;
    }
 
 
 
 
    function al(){
        $(".shop_list").empty();
        /*
        var data = [
            {
                "thumb":"images/1.jpg",
                "goods_name":"T恤",
                "price":2000,
            },
            {
                "thumb":"images/2.jpg",
                "goods_name":"T恤",
                "price":2000,
            },
            {
                "thumb":"images/3.jpg",
                "goods_name":"T恤",
                "price":2000,
            },
            {
                "thumb":"images/4.jpg",
                "goods_name":"T恤",
                "price":2000,
            },
            {
                "thumb":"images/5.jpg",
                "goods_name":"T恤",
                "price":2000,
            }
        ];
         */
        var data = getJsonData();
        var html="";
        $.each(data, function(k,v) {
            //这里的函数参数是键值对的形式，k代表键名，v代表值
            html+='<li>'+
                    '<div class="thumbImg"><img src='+data[k].thumb+' /></div>'+
                    '<div class="goodsName">'+data[k].goods_name+'</div>'+
                    '<div class="shopPrice">'+
                    '<span class="price">￥'+data[k].price+'</span>'+
                    '</div>'+
                    '</li>'
        });
        $(".shop_list").append(html);
 
        console.log("0");
        setTimeout(al, 4000);
    }
    al();
 
})

$data = array(
    array('id'=>1,'goods_name'=>'T恤','thumb'=>'images/1.jpg','price'=>2000),
    array('id'=>2,'goods_name'=>'T恤','thumb'=>'images/2.jpg','price'=>2000),
    array('id'=>3,'goods_name'=>'T恤','thumb'=>'images/3.jpg','price'=>2000),
    array('id'=>4,'goods_name'=>'T恤','thumb'=>'images/4.jpg','price'=>2000),
    array('id'=>5,'goods_name'=>'T恤','thumb'=>'images/5.jpg','price'=>2000),
);
//随机选择出两个元素
$temp=array_rand($data,4);
//重组数组
foreach($temp as $val){
    $data_last[]=$data[$val];
}
//print_R($data_last);
 
//json格式内容
$json_data = array(
    'info'=>$data_last
);
//输出json
echo $json = json_encode($json_data);

清空

$(".shop_list").empty()