2

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

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

4

1 回答 1

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]);

有关的：

于 2013-11-13T13:11:32.460 回答