Question

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

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

基本情景：

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

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

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

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

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

我认为这对于vaadin或GWT用户来说是一个小问题，但我正在为传统的MVC而不是使用代码生成器。

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

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

我相信我在这里缺少一些非常基本和重要的东西。

谢谢，

Answer 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>

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

最后，编写调用控制器，填充数据和管理页面转换的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（）。

更新视图部件时的AJAX机制

1 个答案: