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

通过JSON/AJAX更新HTML

json ajax ruby-on-rails jquery javascript

tfwright · 技术社区 · 16 年前

自从听说JSON以来,我一直在rails应用程序中使用JSON来处理AJAX功能,因为使用RJS/rendering HTML“感觉”不对,因为它违反了MVC。我参与的第一个AJAX密集型项目最终有20-30个控制器操作与特定的UI行为直接关联,我的视图代码分布在控制器操作、部分和rjs文件上。使用JSON允许您在视图中保留视图特定的代码,并且只通过AJAX与视图无关/RESTful控制器操作进行对话,以获取所需的数据。

// ...ajax 
success: function(records){
  $(records).each(function(record){
    var html = ('<div id="blah">' + record.attr +
      etc +
    ')
  })
}

其中etc是10-15行基于记录数据动态构建的HTML。除了烦恼之外,这种方法的一个更严重的缺点是HTML结构的重复(在模板和JS中)。*这种方法有更好的实践吗?

(我最终接触的动机是,我现在的任务是更新非常复杂的HTML,它首先需要两个嵌套的Ruby代码循环来呈现。在Javascript中复制这一点似乎很疯狂。)

4 回复 | 直到 16 年前

Ben Crouse 16 年前

我喜欢模板化的想法。根据我的经验,它真的可以清理混乱的字符串操作!

http://ejohn.org/blog/javascript-micro-templating/

Paul Degnan 16 年前

我将创建一个HTML结构,其中包含需要通过AJAX更新的元素的占位符。它应用了多少结构将取决于您正在更新的内容;如果你提前知道你将拥有的元素的数量,这将是一件非常重要的事情

<div id="article1">
    <div id="article1Headline"></div>
    <div id="article1Copy"></div>
    <div id="article1AuthorInfo"></div>
</div>
<div id="article2">
    <div id="article2Headline"></div>
    <div id="article2Copy"></div>
    <div id="article2AuthorInfo"></div>
</div>

然后编写直接引用每个元素id的代码,并将其插入到.innerHTML属性中(或jquery执行相同操作的任何语法上更甜的方式)。嗯,分配每个元素的内容并不可怕,你不想在AJAX函数中散布的部分是HTML结构本身;在你的应用程序中,内容无论如何都是不稳定的。

<div id="articleList"></div>

在这种情况下,我看不出有什么方法可以避免在javascript调用中构建HTML结构,但对javascript进行合理的分解应该有助于:

function addArticle( headline, copy, authorInfo, i ){
    createDiv( "article" + i + "Headline", headline );
    createDiv( "article" + i + "Copy", copy);
    createDiv( "article" + i + "AuthorInfo", authorInfo );
}

(当然不是工作代码,但你明白了,)

fijter 16 年前

您可以在jQuery中使用load函数; 这会将页面内容加载到div中,如下所示:

$('#content').load("content/" + this.href.split('#')[1] + ".html", '', checkResponse);

只需创建一个动态视图,您就可以开始了。。。

tfwright 16 年前

正好找到了我想要的东西: Jaml