實現功能：點選選項之後，篩選出對應的產品

1.注意替換後臺提供的url

2.beforeSend: function(){
      $("#xunhuan2").html("");
   },

實現在傳送前，清空內容

3.html+=``,將清空內容下方的html程式碼複製貼上到``內，然後將html+=`內容`複製到網站https://babeljs.io/repl，將轉化好的內容貼上到js程式碼處。注意貼上html程式碼時，將$符號寫到{}外面

4.然後將html追加到合適的標籤上

html程式碼

<div class="row" id="xunhuan">
    {foreach name="product" item="pro"}
    {if condition="$pro.volumes neq 0"}
    <div class="col-lg-3 col-md-4 volumedetail">
        <a href="{:url('arrivals/detail')}"><img id="volumeimg" src="{$pro.images}" alt=""></a>
        <h3>{$pro.item_no}</h3>
        <p>{$pro.name}</p>
        <a href="javascript:void(0)" class="add">Add to Bag</a>
    </div>
    {/if}
    {/foreach}
</div>
 

js程式碼

$(".vobox").click(function(){
            var name = $(this).attr('data');
            var html="";
            $.ajax({
                type: "POST",
                url: "/news/newProajax",
                data: {volumes:name},
                beforeSend: function(){
                    $("#xunhuan").html("");
                },
                success: function(name){
                    console.log(name)
                    var len = name.length;
                    for(var i=0;i<len;i++){
html += "\n<div class=\"col-lg-3 col-md-4 volumedetail\">\n<a href=\"{:url('arrivals/detail')}\"><img id=\"volumeimg\" src=\"" + name[i].images + "\" alt=\"\"></a>\n<h3>" + name[i].item_no + "</h3>\n<p>" + name[i].name + "</p>\n<a href=\"javascript:void(0)\" class=\"add\">Add to Bag</a>\n</div>\n";
                    }
                    $("#xunhuan").append(html); 
                }
            });
        })
    </script>