Javascript 如何在Jquery中填充JSON响应值

Javascript 如何在Jquery中填充JSON响应值,javascript,jquery,html,css,ajax,Javascript,Jquery,Html,Css,Ajax,我得到了JSON数组格式的Ajax调用结果,如下所示 var productList ={ "products": [ { "brandName": "B1", "productID": "Pid1", "productName": "P1", "imagePath": "IP1", "mrp price": "9.99", "sell price": "8.99" }, {

我得到了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调用的success函数中,我想创建
  • 每个 产品在JSON响应中可用。我想对元素应用一些CSS类和ID。这是李的格式

    <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>
    
  • $brandName++$productName $mrp价格 美元售价
  • 我的疑问是如何在Ajax成功函数中填充这些值。我需要填充的值显示为$prefix,如$brandName$productName等


    我不仅希望填充这些值以显示,而且希望填充方式能够在填充后访问任何元素(使用我们在填充时应用的CSS类和ID),以用于Jquery单击和鼠标悬停功能。

    您可以执行以下操作

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

    整个html都是从jQuery编写的吗?是的。最初,我是在填充值后从Perl脚本本身返回完整的HTML。现在我想在客户端完成它。所以您的ajax请求是成功的,并在客户端获取值,但在您将其编写为html时它不会显示。。rite?它还显示值。但我不想从PERL脚本返回HTML内容,这就是为什么现在PERL只返回JSON格式的数据。在客户端,我们执行所有逻辑,以正确的格式显示它。
    $(document).on("click",".name",function(){
      alert('Yeah i successfully bound an event with an element that did not exist initially')
    });