Question

我得到了JSON数组格式的Ajax调用结果，就像这个

var productList ={
"products": [
    {
        "brandName": "B1",
        "productID": "Pid1",
        "productName": "P1",
        "imagePath": "IP1",
        "mrp price": "9.99",
        "sell price": "8.99"
    },
    {
        "brandName": "B1",
        "productID": "Pid3",
        "productName": "P2",
        "imagePath": "IP2",
        "mrp price": "19.99",
        "sell price": "18.99"
    },
    {
        "brandName": "B1",
        "productID": "Pid3",
        "productName": "P4",
        "imagePath": "IP1",
        "mrp price": "29.99",
        "sell price": "558.99"
    }
]
};

现在，在ajax调用的成功函数中，我想为每个调用创建<li> .. </li>个元素 JSON响应中提供的产品。我想将一些CSS类和ID应用于元素。这是li的格式。

<li class='productWrap $productID' style='height:200px; width:150px;'>
<center> 
    <div class=\"productImageWrap\" id=\"productImageWrapID_+$productID\">
        <img src=$imagePath width='75' height='75' />
    </div>
    <div>
        <div style='font-size: 11px; font-family: \"Verdana\"; '> 
            $brandName + " " + $productName 
        </div>
        <b>                             
            <span>  
                <strike>   $mrp price  </strike>    
                $sell price 
            </span>
            <a href='#' id=\"featuredProduct_$data[0]\" onclick=\" adjust_menu(this.id); simpleCart.add('name=$brandName + " " + $productName', 'price=$sell price','image=$imagePath');             return false;\">   
                <img src='images/add-to-basket2.gif' alt='Add To Basket' width='111' height='32' id='featuredProduct_+$productID' />
            </a>
        </b>
    </div>
</center>
</li>

我的疑问是如何在Ajax成功函数中填充这些值。我需要填充的值显示为$ prefix，如$ brandName $ productName等。

我不仅想要填充这些值来显示，而且想填写这样一种方式，即我可以在填充后访问任何元素（使用我们在填充时应用的CSS类和ID）来用于Jquery点击和鼠标悬停功能。

Answer 1

您可以执行类似

的操作

   success: function(data){
         $ul = $('#theUl');
         data.products.each(function(){
             var li = "<li><h1 class='name'>"+this.brandName+" "+this.productName+"</h1></li>";
             $ul.append(li);
         });

   }

另外，如果你想在h1.name上有一个click事件，你必须委托选择器，因为你在准备就绪后将它推送到DOM方式。这可能看起来像：

$(document).on("click",".name",function(){
  alert('Yeah i successfully bound an event with an element that did not exist initially')
});

Answer 2

观看本文如何使用jquery模板 http://www.diplo.co.uk/blog/2011/3/1/using-jquery-templates-to-bind-to-json-data.aspx

如何在Jquery中填充JSON响应值

2 个答案: