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 identifierreturn "redirect:/articles";
}@DeleteMapping(path="/articles/{id}",produces="text/javascript")
String delete(... id) {// ... delete article with given identifierreturn "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