1

我只是在学习 ajax atm，到目前为止我最好的应用是表单验证。

我的概念性问题是，当我们需要更新某个页面片段时，处理设计问题的最佳方法到底是什么。

基本场景：

我们有第 1 页和第 2 页，两个页面都有相同的菜单和页脚。第 1 页仅包含格式整齐的表格，其中包含一些统计信息的内容，第 2 页包含消息。我们希望实现 ajax，以便当我们从第 1 页移动到第 2 页时菜单保持在顶部，反之亦然。

例如，我们有从服务器返回 JSON 的请求处理程序。对于第 1 页的 ajax 请求，我们的服务器只返回第 2 页消息的表数据。

困惑是如何以及在哪里存储设计信息以正确格式化返回数据的页面片段？常见的策略是什么 - 是在 ajax 方法中对“成功”事件的数据手动应用 css 吗？但是它不会在客户端和服务器之间引入不相交，因为服务器也将格式本身应用于标准请求？如果从 ajax 请求返回的内容数据需要像我给你的例子那样截然不同的设计，这意味着将大多数 html 和 css 应用程序外部化到 javaScript 中，我个人认为如果你是这样的话，这将是一个问题：

  1. 更新页面的大片段 - 代码在客户端变得不可维护，或者我们也需要客户端的模板引擎。
  2. 在服务器端使用模板引擎，甚至在 java 的情况下使用普通的 .jsp。- 我们将获得例如“apache tile”视图块的语法和结构，然后必须为客户端 ajax 响应处理部分编写带有 css 的纯 html。

当然，我们可以返回 XML，但似乎开发轨迹有利于 JSON，例如在 Spring Framework 的情况下，转换器会自动完成这项工作。

我相信这对于 vaadin 或 GWT 用户来说有点担心，但我支持传统的 MVC 并且不使用代码生成器。

为了缩小上下文范围，我特别感兴趣的是人们如何在 Spring MVC 中使用 JSP 和 Spring MVC + Apache Tiles 处理这个问题。

我也可以将带有 JSON 数据的 HTML 设计元数据发送回客户端，否则这将是非常可怕的事情吗？但再次与服务器端的视图渲染技术存在差异。

我相信我在这里遗漏了一些非常基本和重要的东西。

谢谢你，

4

1 回答 1

1

如果您将在系统中的许多页面中重复使用此菜单和页脚，那么我确实建议您使用模板引擎，如 Thymeleaf、JSP 标记或 Apache Tiles。

但我认为您真正好奇的是如何通过 AJAX 管理部分页面内容的转换，并且您（正确地）不想让控制器层负责生成页面片段。

在这里，您生成一个包含第1 页表和第 2 页消息的页面：

<div id="page1" style="display: none">
    <%--table structure, without data--%>
</div>

<div id="page2" style="display: none">
    <%--message display, without message content--%>
</div>

现在，您创建了两个返回 JSON 格式的原始数据的 Spring MVC 控制器方法，一个返回您的表数据，另一个返回您的消息。

最后，编写调用控制器、填充数据和管理页面转换的 Javascript 处理程序。为简洁起见，我将使用 jQuery 语法：

$.getJSON( 'mycontroller/page1', params, function( jsonData ) {
    // populate table data
    $( '#page1' ).show();
    $( '#page2' ).hide();
} );

显示表格数据，并且：

$.getJSON( 'mycontroller/page2', params, function( jsonData ) {
    // populate message text
    $( '#page1' ).hide();
    $( '#page2' ).show();
} );

显示消息。

当然，既然您正在使用 Javascript，您可以根据需要将 show() 替换为花哨的动画转换，如幻灯片或淡入淡出。

于 2013-06-29T21:01:00.713 回答