如何将不同的 CSS 类添加到 ajax 响应的不同标签答案

【问题标题】：How to add Different CSS classes to different tags of ajax reponse如何将不同的 CSS 类添加到 ajax 响应的不同标签
【发布时间】：2013-11-13 13:00:46
【问题描述】：

客户端正在通过 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>";
}

有什么办法可以避免这种情况。并在收到响应后在客户端应用类和样式？

【问题讨论】：

你有没有想过使用可以填充 JSON 的模板？
最好使用 JSON 作为输出格式并完全在前端进行样式设置。有了这个，您可以影响整个标记客户端，并在您的 ajax 调用中使用状态代码来更好地了解给出的结果（例如，未找到、找到 1 个，以及许多结果。

标签： javascript jquery html css ajax

【解决方案1】：

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

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

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

由于这不是 JavaScript，浏览器不会执行它。它也不会尝试渲染它。但是您可以使用 jQuery $('#itemTemplate ul li') 来获取列表项。现在您可以使用所有 jQuery 魔法将数据插入模板并添加 CSS 样式等：

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