我在尝试进行 AJAX 开发时遇到了一个常见问题。在可能的情况下,我喜欢尝试只更新现有布局中的数据,而不是布局本身。例如,采用下面的 div:
<div id="content-5">Here is some content</div>
我会得到更新的值content-5
从服务器获取,只需将 content-5 的内容替换为该值即可。这对于简单的数据替换非常有意义,其中值始终以其纯粹的形式显示。
有时内容更复杂,我实际上必须获得的不仅仅是原始数据......也许有一些逻辑来确定如何显示值,也许样式需要根据内部数据而不同。在这种情况下,我通常在服务器端生成 HTML 并将 HTML 注入到元素中,而不仅仅是原始数据。
示例:控制器的状态字段返回为“完整”,但从设计文档来看,“完整”应该向用户显示文本“可用”,并且需要以与其他状态不同的方式设置样式。
在 Javascript 中执行此操作需要模板层可能已经处理的一些深入的视图知识。最终结果是相同的(下面的代码片段),但不同之处在于可能存在一些代码重复和更复杂的 Javascript 层。
<div id="content-5"><span class="success">Available</span></div>
毫无疑问,系统也需要处理“新”内容。最容易实现的解决方案是同时获取所有内容,这样我就不需要处理注入新元素而不是仅替换现有内容的额外复杂性。
因此,我创建一个新模板,将内容包装在另一个带有 ID 的元素中,并在发生更改时同时批量替换所有内容 div。
<div id="allContent">
<div id="content-1">Some content A</div>
<div id="content-2">Some content B</div>
<div id="content-3">Some content C</div>
<div id="content-4">Some content D</div>
<div id="content-5">Some content E</div>
</div>
有时候,我不得不想:底线在哪里?在某些时候,我感觉我最终会用 AJAX 请求替换整个页面。这真的会成为问题吗?
我意识到这可能相当主观,但是有哪些好的策略可以确定您应该用 AJAX 替换内容到哪个级别?如果可能的话,仅替换数据似乎是我的首选方法,因为它使 AJAX 控制器非常简单。从模板中替换较大的 HTML 块似乎是处理更复杂的布局和设计问题的最简单方法,而且感觉它可以更容易维护。还有其他我没有考虑过的选择吗?
我预计会有一些关于以编程方式操作 DOM 的讨论,但我个人真的不喜欢这个。代码最终看起来非常糟糕,并且真的开始根据我的喜好将太多的布局和设计集成到 JS 层中。由于我通常使用某种模板库(无论是原始 PHP、Smarty 等 PHP 模板还是 Java 中的 JSP),因此尽可能多地保留视觉设计似乎更有意义。
EDIT
根据前几个答案,这似乎被解读为试图让用户保持在同一页面上,但在网站周围导航,或者在每次更新时以激进的方式更改页面。问题更多的是如何确定 AJAX 调用的布局工作应该发生在哪里,以及使用 AJAX 请求更改大块代码是否是可接受的做法,因为知道替换代码可能看起来与原来的代码几乎相同前。