通过JSON/AJAX更新HTML

自从我听说它以来，我一直在使用JSON处理AJAX功能，因为使用RJS /呈现HTML“感觉”错误，因为它违反了MVC。我工作的第一个AJAX项目最终以20-30个控制器操作直接绑定到特定的UI行为，我的视图代码遍布控制器操作，部分和rjs文件。使用JSON允许您在视图中保留特定于视图的代码，并且只能通过AJAX查看agnostic/RESTful控制器操作来获取所需数据。通过JSON/AJAX更新HTML

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

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

其中etc是根据记录数据动态构建HTML的10-15行。除了烦恼外，更严重的缺点是HTML结构的重复（在模板和JS中）。*这种方法是否有更好的做法？

（我为终于伸手动机是我现在有更新HTML如此复杂，它需要Ruby代码的两个嵌套循环首先进行渲染。复制在Javascript中似乎疯狂的任务。）

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

来源

2010-01-18 tfwright

只是偶然发现正是我一直在寻找：Jaml

来源

2010-01-21 23:48:41 tfwright

这仍然有点混乱，你必须在Javascript中包含布局。我非常喜欢John Resig在其他答案中的模板，这些答案非常清楚（大部分）将用户界面和控制器分开。很好，如果Jaml为你工作:) – Jaanus 2010-01-22 00:28:53

你可以在jQuery中使用load函数; 此加载页面的内容到这样一个div：

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

只是做一个动态的观点，你是好去...

来源

2010-01-18 19:18:57 fijter

我_could_，但这让我回到了我想要做的每个AJAX更新的具体操作/部分的糟糕的过去。对于一个狂热的狂热者来说，这是非常痛苦的。我希望这不是唯一的实用解决方案。 – tfwright 2010-01-18 19:31:11

我会创建一个包含占位符的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>

在这种情况下，我真的不明白的方式，以避免建立HTML结构在JavaScript调用，但你的JavaScript分解的合理数量应该帮助的是：

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

（不工作，当然代码，但你的想法，）

来源

2010-01-18 19:59:00

是的，我已经在尽可能使用占位符。分解函数本身的更常见的建议是有帮助的。实际上，我非常喜欢这个代码，它看起来像一个潜在的jQuery插件...确实：http://blogs.microsoft.co.il/blogs/basil/archive/2008/08/21/jquery-create-jquery -plug-in-to-create-elements.aspx – tfwright 2010-01-18 20:10:36

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

解决方法有很多，比如，检查了约翰Resig的（jQuery的作者）：

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

来源

2010-01-18 21:05:29 Ben

很棒的链接，谢谢 – tfwright 2010-01-18 21:37:02

通过JSON/AJAX更新HTML

回答

相关问题