Spring Roo JDialog 表单更新表格内容

Question

我有这个JQuery 对话框，其中包含<input> 和<table>。 <input> 是 <table> 的 onload 内容的过滤器字段。我听说JQGrid 有这个功能，但这个模块现在不适合我。

我尝试搜索其他解决方案并提出AJAX。我在这个线程中使用Spring-Roo，因为AJAX 可以成为一个解决方案，所以我对AJAX 是个新手。这是视图的代码结构，没有任何javascript。

<form:form action="POST" action="form_action" modelAttribute="form">
    <div>
        <form:input path="filterField" />
        <input type="submit" value="Search" />          
    </div>
    <div>
        <table>
            <c:forEach items="${items}" var="itr">
                <tr>
                    <td>${itr.data}</td>
                </tr>
            </c:forEach>
        </table>
    </div>
</form:form>

我是 JQuery、AJAX 和 Spring-Roo 的新手。非常感谢您对此进行详细说明。

Answer 1

由于这是一个非常笼统的要求，我会尽量给你一个非常笼统的答案。

进行异步调用需要几件事情，并且需要做出几个决定。了解 AJAX 不再是真正的 AJAX，而是一个通用术语，现在适用于您从基于浏览器的客户端向某种后端进行异步调用的任何进程。

首先，您需要编写一个方法来处理您的 AJAX 请求。这是您必须做出的第一个决定：您的服务的请求参数是什么，产生的有效负载是什么。我更喜欢 RESTful JSON 类型的请求，但是很多人喜欢 XML。对于 RESTful JSON 版本，您可以执行以下操作：

@RequestMapping("/widgets/{id}")
public @ResponseBody Widget getMyWidget(@PathVariable Integer id) {
  // ...perform some lookup, idealy in a service layer
  Widget myWidget = myService.findWidget(id);
  return myWidget;
}

这里的重要部分是@ResponseBody 和return myWidget。在 Spring 中，@ResponseBody 表示返回将被逐字复制到响应正文中。因此，例如，您可以返回一个包含 HTML 代码的字符串，它只是复制/粘贴到响应中。这与正常返回相反，正常返回通常是一些代表View 的字符串名称。 PFM（pure friggen magic）的第二位是 Wiget 类型的返回。只要您的路径中有 Jackson 库，Spring 就会自动神奇地使用它来序列化您返回的 JSON。这负责服务器端。

在客户端，您需要调用服务器上的服务。首先，放弃<input type="submit" value="Search" />，将其改为类型按钮。使用提交类型只会导致您出现问题，因为它会尝试提交表单，这不是异步的。将 jQuery 单击处理程序附加到按钮，并使用它的 $.ajax() 方法调用您的服务。再说一次，有很多选择，我不可能全部看完。但是，这里的一般想法是做这样的事情：

$('#myButton').click(function() {
  $.ajax({
    url: 'http://myhost/myController/widget/1',
    success: function(data) {
      // Do something with the widget, like fill a table full of stuff
    }
  });
});

jQuery 中的 $.ajax() 调用有很多选项，而且到处都有例子。您可能还想处理错误响应...此示例仅显示处理成功。

这至少应该让你开始。您将不得不自己调查所有选项和可能性，因为我不知道您的应用程序或所涉及的情况，因此我无法为您做出架构决策。