Javascript 如何向ajax响应的不同标记添加不同的CSS类

客户端正在通过jquery进行ajax调用。从数据库中获取数据后，我将返回响应。在这个响应中，我将大量的类和样式应用于不同的html标记。这使得代码看起来很难看

while (my @data = $statement->fetchrow_array())
{
print " <li class='productWrap $data[7]' style='height:200px; width:150px;'>
            <center> 
                <div class=\"productImageWrap\" id=\"productImageWrapID_$data[0]\">
                <img src=$data[5] width='75' height='75'' />
                </div>
                <div>
                    <div style='font-size: 11px; font-family: \"Verdana\"; '> $data[6] $data[1] $data[2] </div>
                    <b>                             
                        <span>  <strike>   $data[3]  </strike>  $data[4] </span>
                        <a href='#' id=\"featuredProduct_$data[0]\" onclick=\" adjust_menu(this.id); simpleCart.add('name=$data[6] $data[1] $data[2]', 'price=$data[4]','image=$data[5]');           return false;\">   
                            <img src='images/add-to-basket2.gif' alt='Add To Basket' width='111' height='32' id='featuredProduct+$data[0]' />
                        </a>
                    </b>

                </div>
            </center>
        </li>";
}

while（my@data=$statement->fetchrow\u array（））
{
打印“

$data[6]$data[1]$data[2]
$data[3]$data[4]
”；
}

---

有没有办法，这样我就可以避免这个。并在得到响应后在客户端自身应用类和样式？

一个好的解决方案是将数据编码为JSON字符串，将其传递给客户端并让其呈现结果

有两个jquery模板引擎。一个有趣的方法是：

<script type="text/template" id="itemTemplate">
    <ul>
        <li class='productWrap' style='height:200px; width:150px;'>
            ...
       </li>
    </ul>
</script>

相关的：

---

您是否考虑过使用可填充JSON的模板？最好使用JSON作为输出格式，并在前端完成样式设置。通过这种方式，您可以影响整个标记客户端，并在ajax调用中使用状态代码，以更好地了解给出的结果（例如，未找到任何结果、1找到多个结果）。

var item = $('#itemTemplate ul li');
item.addClass(data[7]);