Javascript 通过JSON/AJAX更新HTML

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

我发现使用纯JSON的一个头痛问题是必须通过JS“呈现”HTML，这对于必须更新DOM重元素的AJAX来说可能是一个真正的难题。我最终得到了长字符串的构建代码，比如

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

/…ajax
成功：功能（记录）{
$（记录）。每个功能（记录）{
var html=（“”+record.attr+
等+
')
})
}

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

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

• 我考虑过的一件事是直接从文件系统加载静态部分文件，但这似乎有点过分

  ---

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

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

---

只要创建一个动态视图，就可以了……

我会创建一个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>

---

（当然不是正常工作的代码，但是你明白了，）

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

有很多解决方案，例如，查看John Resig（jQuery的创建者）：

---

恰好找到了我想要的东西：

我可以，但这让我回到了糟糕的过去，我想做的每个AJAX更新都有一个特定的操作/部分。对于一个安静的狂热者来说，这是非常痛苦的。我希望这不是唯一实用的解决方案。是的，我已经尽可能使用占位符了。对函数本身进行分解的更符合常识的建议是有帮助的。事实上，我非常喜欢这段代码，它看起来像是一个潜在的jQuery插件……事实上：这仍然有些混乱，您必须在Javascript中包含一些布局。我真的很喜欢John Resig在另一个答案中的模板，它非常清楚（主要）地将UI和控制器分开。如果Jaml对您有效，那就太好了：）

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

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