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

How to add Different CSS classes to different tags of ajax reponse

本文关键字：ajax 响应标签 CSS 添加更新时间：2023-09-26

客户端正在通过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 字符串，将其传递给客户端并让它呈现结果。

有几个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]);