代码之家 › 专栏 › 技术社区 › Sheff

从AJAX结果呈现HTML内容

ajax jquery asp.net .net c#

3

Sheff · 技术社区 · 16 年前

我正在编写一个应用程序,它从AJAX JSON响应中呈现“作业”对象列表。

那么,问题是如何根据用户输入呈现HTML?我已经看到了一些例子,在页面上放置标记模板,然后使用JQuery克隆它并填充相关数据,然后将其插入DOM。

问题是模板包含可见内容(图像等),应用程序需要降级,因此我在页面上有一个中继器,如果JS不可用,服务器端代码和页面加载时填充。

2 回复 | 直到 16 年前

1

3

Dan F 16 年前

Rick Strahl说,John Resig(jQuery的花花公子)做了一个超级简单的模板引擎,你可以使用客户端 a good post 关于它。

Javascript Templates -不是最具想象力的名字,但它真的很不错。

我通常不做谷歌链接,但asp.NETAjax(4.0?)有一些 client side templating 这将使您能够直接获取JSON对象并将其数据绑定。

如果做不到这一点,我将成为魔鬼代言人,说“语义HTML有什么问题?”?。只要它是语义的,并且有类而不是硬编码的样式,我个人认为从服务器端调用返回HTML没有什么错。当然,不是那么简单 纯净的 与其他解决方案一样,但它是一个更容易组合的该死的站点。在某些情况下,我甚至发现它更容易维护,因为您让“服务器端编码器”返回带有嵌入类的HTML,“客户端编码器”可以通过6种方式将其样式设置为sunday:-)

2

1

Tatu Ulmanen 16 年前

根据数据的复杂性,使用jQuery对象构建HTML可能是可行的。这看起来仍然非常漂亮,并且比编写原始HTML更易于维护:

$.ajax({
    url: 'foo',
    dataType: 'json',
    success: function(data) {



        var container = $('<div />')
                        .attr('id', 'container');

        for(var i in data.items) {
            var child = $('<div />')
                        .addClass('container-child');

            var title = $('<p />')
                        .html(data.items[i].title)
                        .addClass('item-title');

            var description = $('<p />')
                              .html(data.items[i].description)
                              .addClass('item-description');

            child.append(title).append(description);

            container.append(child);
        }

        // Remove existing container
        $('div#container').remove();
        // And replace it with the just created one
        $('body').append(container);
    }
});

此方法与使用“虚拟”HTML元素、克隆该元素并用正确的值填充子元素一样快。在我看来,这更干净,更容易理解。