我一直想嘗試一下是否可以在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

總結

以上是生活随笔為你收集整理的Spring与Rails的jQuery UJS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。