Spring与Rails的jQuery UJS

我一直想尝试一下是否可以在Spring Boot项目中使用Rails的jQuery UJS 。 jquery-ujs中的UJS代表不引人注目JavaScript 。 我非常喜欢UJS如何将事件处理程序连接到标记有HTML5 data-*属性的合格DOM元素。 我发现自己希望看到更多在Spring Boot Web应用程序中使用的这种方法。 我想知道为什么在网络上很少提及此事。 或者，也许我一直在找错地方。

无论如何，这是jQuery UJS可以做的一些事情，相关的源代码在GitHub上 （尽管使用了不同的示例）。

非GET链接（例如DELETE）

当我需要呈现一个删除项目的链接时，我会使用包裹在<form>的<button>以及一个带有<form> delete <form>值的_method隐藏字段。 <form>对用户不可见。 但是可见按钮用于提交<form> 。 一些CSS用于使按钮看起来像链接。

<form action="/articles/42" method="post">
  <input type="hidden" name="_method" value="delete" />
  <button class="btn btn-link">Delete</button>
</form>

感谢Spring的HiddenHttpMethodFilter （也在Spring Boot中自动配置），提交此<form> ，将使用DELETE方法将其作为请求接收。 它映射到相关@Controller中的@DeleteMapping(path="/articles/{id}") 。

尽管上述方法有效，但使用jQuery UJS却有一种更简单的方法。 呈现链接以删除项目所需的所有操作如下：

<a href="/articles/42" data-method="delete">Delete</a>

jQuery UJS将增强具有data-method属性的链接。 单击上面的示例链接时，JavaScript将创建一个<form> 。 此<form>的action属性设置为链接的href的值。 该方法设置为post 。 将一个隐藏的_method字段添加到<form>并将其设置为链接的data-method 。 最后，提交<form> （并且不跟随链接）。

确认对话框

通常，在删除任何内容时，最好与用户确认。 可以通过window.confirm()将其实现为简单的对话框。 如果我们从上一个示例构建，则<form>看起来像这样：

<form action="/articles/42" method="post"
    onsubmit="return confirm('Are you sure?')">
  <input type="hidden" name="_method" value="delete" />
  <button>Delete</button>
</form>

尽管上述方法有效，但jQuery UJS向我们展示了一种更好的方法。 删除之前需要确认的所有内容是：

<a href="/articles/42?delete" data-method="delete"
    data-confirm="Are you sure?">Delete</a>

jQuery UJS将增强具有data-confirm属性的链接（以及<form> ）。 单击上面的示例链接时，JavaScript将调用confirm()来显示一个对话框，其中包含作为属性值的文本。 如果用户选择取消，则不会发生<form>的创建/提交（由于data-method ）。

Ajax链接

删除项目后，页面通常会重新加载以显示已删除的元素确实已被删除。

假设项目显示在表格中。 每行都有一个唯一的id 。

<table>
  <tr id="article:18">
    <!-- data cells for /articles/18 -->
    <td><a href="/articles/18?delete"
        data-method="delete" data-confirm="Are you sure?">Delete</a></td>
  </tr>
  <tr id="article:42">
    <!-- data cells for /articles/42 -->
    <td><a href="/articles/42?delete"
        data-method="delete" data-confirm="Are you sure?">Delete</a></td>
  </tr>
  <!-- other rows -->
</table>

假设我们可以简单地删除代表已删除项目HTML元素，那么我们可以异步发送DELETE请求并获得一个响应，该响应将删除相关HTML元素。 jQuery UJS使此操作变得简单，就像向服务器端控制器添加data-remote="true"和一些小的更改一样。

对于HTML，我们需要的只是data-remote="true" 。

<a href="/articles/42?delete" data-remote="true"
    data-method="delete"
    data-confirm="Are you sure?">Delete</a>

单击链接后，jQuery UJS将再次发送DELETE请求。 但是这次，它将使用Ajax异步发送。 这样做使浏览器不会重新加载整个页面。 并且根据服务器的响应，可以仅更新页面的一部分。 因此，提供了更好的用户体验。

对于服务器端控制器，当请求需要text/javascript时，我们需要发送不同的响应。 我们添加了一个处理程序方法，该方法将使用@RequestMapping的produces元素来响应text/javascript 。 响应将删除相关HTML元素。

// inside a @Controller
@DeleteMapping(path="/articles/{id}")
String delete(... id) {
    // ... delete article with given identifier
    return "redirect:/articles";
}

@DeleteMapping(path="/articles/{id}",
    produces="text/javascript")
String delete(... id) {
    // ... delete article with given identifier
    return "articles/delete";
}

该视图是一个包含text/javascript的JSP。 这将由jQuery UJS执行。

<%-- articles/delete.js.jsp --%>
<%@ page contentType="text/javascript" %>
$('#article:${id}').remove();

部分和服务器生成JavaScript响应

现在，如果我们想拥有一个编辑链接来获取一些HTML内容并以模式显示（不刷新页面）会发生什么？

这就是我们可以做的。 我们异步发送GET请求。 预期响应将包含JavaScript，该JavaScript将HTML附加到文档中的目标位置，然后触发模式出现。

<a href="/articles/42?edit" data-remote="true">Edit</a>

当期望的响应是text/javascript ，将呈现articles/edit.js.jsp 。 否则，将呈现常规的articles/edit.jsp 。

// inside a @Controller
@GetMapping(path="/articles/{id}", params={"edit"})
String edit(... id, ...) {
    // ...
    return "articles/edit";
}

@GetMapping(path="/articles/{id}", params={"edit"},
    produces="text/javascript")
String editViaAjax(... id, ...) {
    // ...
    return "articles/edit";
}

edit.jsp呈现<form> （部分而不是完整HTML文档），该文件已重构为自己的JSP，以避免重复。

<%-- articles/edit.jsp --%>
<!-- -->
  <jsp:include page="_form.jsp" />
<!-- -->

edit.js.jsp呈现与JS中的字符串相同的<form> （部分而不是完整HTML文档）。 然后将其包括在模态中。 将_form.jsp呈现为字符串非常棘手。 我不得不使用<c:import> 。

<%-- articles/edit.js.jsp --%>
<%@ page contentType="text/javascript" %>
<c:import var="html" url="…_form.jsp" />
<!-- escape double quotes and remove new lines -->
(function() {
  const $modal = $('#...'); // ID of modal element
  $modal.find('.modal-body').html('${html}');
  if (!$modal.is(':visible')) {
    $modal.modal('show');
  }
})()

为此，需要配置另一个text/javascript作为contentType InternalResourceViewResolver （IRVR）bean。 该bean使用相同的前缀和稍微不同的后缀： .js.jsp 。 这样，当请求要求使用text/javascript ， CNVR将更喜欢将IRVR bean与text/javascript ，并最终呈现articles/edit.js.jsp 。

Ajax形式

data-remote="true"属性也可以应用于<form> 。 有了它，jQuery UJS将把表单提交作为Ajax请求处理。 在提交表单时，可以通过添加data-disabled-with来禁用按钮。 例如，

<form ...>
  <!-- ... -->
  <button data-disable-with="Saving...">Save</button>
</form ...>

提交以上表单后，jQuery UJS将禁用该按钮，并将其内容更改为“ Saving…”。

总结思想

我几乎没有触及Rails的jQuery UJS的表面。 它可以提供更多的功能。 我期待在我的Web应用程序中使用它（和类似的技术）。

翻译自: https://www.javacodegeeks.com/2019/06/spring-with-rails-jquery-ujs.html