rails jquery

我一直想嘗試一下是否可以在Spring Boot項目中使用Rails的jQuery UJS 。 jquery-ujs中的UJS代表簡潔的JavaScript 。 我非常喜歡UJS如何將事件處理程序連接到標(biāo)記有HTML5 data-*屬性的合格DOM元素。 我發(fā)現(xiàn)自己希望看到更多在Spring Boot Web應(yīng)用程序中使用的這種方法。 我不知道為什么在網(wǎng)絡(luò)上很少提及此事。 或者，也許我一直在找錯地方。

無論如何，這是jQuery UJS可以做的一些事情，相關(guān)的源代碼在GitHub上 （盡管使用了另一個示例）。

非GET鏈接（例如DELETE）

當(dāng)我需要呈現(xiàn)一個刪除項目的鏈接時，我會使用包裹在<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方法將其作為請求接收。 它映射到相關(guān)@Controller中的@DeleteMapping(path="/articles/{id}") 。

盡管上述方法可行，但使用jQuery UJS卻有一種更簡單的方法。 呈現(xiàn)鏈接以刪除項目所需的全部是這樣的：

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

jQuery UJS將增強(qiáng)具有data-method屬性的鏈接。 單擊上面的示例鏈接時，JavaScript將創(chuàng)建一個<form> 。 此<form>的action屬性設(shè)置為鏈接的href的值。 該方法設(shè)置為post 。 將一個隱藏的_method字段添加到<form>并將其設(shè)置為鏈接的data-method 。 最后，提交<form> （并且不跟隨鏈接）。

確認(rèn)對話框

通常，在刪除任何內(nèi)容時，最好與用戶確認(rèn)。 可以通過window.confirm()將其實現(xiàn)為簡單的對話框。 如果我們從上一個示例構(gòu)建，則<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向我們展示了一種更好的方法。 刪除之前需要確認(rèn)的所有內(nèi)容是：

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

jQuery UJS將增強(qiáng)具有data-confirm屬性的鏈接（以及<form> ）。 單擊上面的示例鏈接時，JavaScript將調(diào)用confirm()來顯示一個對話框，其中包含作為屬性值的文本。 如果用戶選擇取消，則不會發(fā)生<form>的創(chuàng)建/提交（由于data-method ）。

Ajax鏈接

刪除項目后，頁面通常會重新加載以顯示已刪除的元素確實已被刪除。

假設(shè)項目顯示在表格中。 每行都有一個唯一的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>

假設(shè)我們可以簡單地刪除代表已刪除項目HTML元素，那么我們可以異步發(fā)送DELETE請求并獲得一個響應(yīng)，該響應(yīng)將刪除相關(guān)HTML元素。 jQuery UJS使此操作變得簡單，就像向服務(wù)器端控制器添加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將再次發(fā)送DELETE請求。 但是這次，它將使用Ajax異步發(fā)送。 這樣做使瀏覽器不會重新加載整個頁面。 并且根據(jù)服務(wù)器的響應(yīng)，可以僅更新頁面的一部分。 因此，提供了更好的用戶體驗。

對于服務(wù)器端控制器，當(dāng)請求需要text/javascript時，我們需要發(fā)送不同的響應(yīng)。 我們添加了一個處理程序方法，該方法將通過使用@RequestMapping的produces元素來響應(yīng)text/javascript 。 響應(yīng)將刪除相關(guān)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執(zhí)行。

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

部分和服務(wù)器生成JavaScript響應(yīng)

現(xiàn)在，如果我們想擁有一個編輯鏈接來獲取一些HTML內(nèi)容并將其顯示為模式（不刷新頁面）會發(fā)生什么？

這就是我們可以做的。 我們異步發(fā)送GET請求。 該響應(yīng)應(yīng)包含JavaScript，該JavaScript將HTML附加到文檔中的目標(biāo)位置，然后觸發(fā)模式出現(xiàn)。

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

當(dāng)期望的響應(yīng)是text/javascript ，將呈現(xiàn)articles/edit.js.jsp 。 否則，將呈現(xiàn)常規(guī)的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呈現(xiàn)<form> （部分而不是完整HTML文檔），該文件已重構(gòu)為自己的JSP，以避免重復(fù)。

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

edit.js.jsp呈現(xiàn)與JS中的字符串相同的<form> （部分而不是完整HTML文檔）。 然后將其包括在模態(tài)中。 將_form.jsp呈現(xiàn)為字符串非常棘手。 我不得不使用<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 。 這樣，當(dāng)請求要求使用text/javascript ， CNVR將更喜歡將IRVR bean與text/javascript ，并最終呈現(xiàn)articles/edit.js.jsp 。

Ajax形式

data-remote="true"屬性也可以應(yīng)用于<form> 。 有了它，jQuery UJS將把表單提交作為Ajax請求處理。 在提交表單時，可以通過添加data-disabled-with來禁用按鈕。 例如，

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

提交以上表單后，jQuery UJS將禁用該按鈕，并將其內(nèi)容更改為“ Saving…”。

總結(jié)思想

我?guī)缀鯖]有觸及Rails的jQuery UJS的表面。 它可以提供更多的功能。 我期待在我的Web應(yīng)用程序中使用它（以及類似的技術(shù)）。

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

rails jquery

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。