rails jquery_Spring与Rails的jQuery UJS
rails jquery
我一直想尝试一下是否可以在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
rails jquery
rails jquery_Spring与Rails的jQuery UJS相关推荐
- Spring与Rails的jQuery UJS
我一直想尝试一下是否可以在Spring Boot项目中使用Rails的jQuery UJS . jquery-ujs中的UJS代表不引人注目JavaScript . 我非常喜欢UJS如何将事件处理程序 ...
- mac rails mysql_MAC下Rails连接mysql出现 dyld: Symbol not found: _mysql_get_client_info 的解决办法...
MAC下Rails连接mysql出现 dyld: Symbol not found: _mysql_get_client_info 的解决办法 2014-2-12 / 阅读数:5471 / 分类: R ...
- [Ruby on Rails系列]3、初试Rails:使用Rails开发第一个Web程序
本系列前两部分已经介绍了如何配置Ruby on Rails开发环境,现在终于进入正题啦! Part1.开发前的准备 本次的主要任务是开发第一个Rails程序.需要特别指出的是,本次我选用了一个(Paa ...
- java rails orm_php 模拟 rails 中的 ActionRecord 的 ORM (一)
之前使用过 Rails 的人一定会对 ActionRecord 这个 ORM 实现有比较深的印象. 所谓 ORM 即 Object-Relational Mapping,是指将主流的关系型数据库转化为 ...
- Rails caching(Rails高速缓存)
目录 1. 基本缓存 1.1 page caching 1.2 action caching 1.3 fragment caching 1.4 俄罗斯套娃caching 1.5 共享部分caching ...
- ruby on rails_如何在Ruby on Rails应用中用Vue.js替换jQuery
ruby on rails by Igor Petrov 通过伊戈尔·彼得罗夫(Igor Petrov) 如何在Ruby on Rails应用中用Vue.js替换jQuery (How to repl ...
- rails 自定义主键_带有Rails 6 Webpacker和turbolink的自定义和第三方javascript指南
rails 自定义主键 Ihave recently had the pleasure of updating our app from Rails 4 to Rails 6. Though it i ...
- Ruby/Rails 生态环境、社区、资料 Ecosystem
Ruby/Rails 生態圈 Ecosystem 一個成功的開放原始碼程式語言和框架,背後一定有一個強大的社群在支持.團隊和個人的時間成本有限,你不可能每個用到的工具和函式庫工具都自己從頭開發.因此, ...
- 如何开始rails项目
1.安装操作系统(Linux) 经过实践,rails项目可以顺利在windows.linux(Ubuntu).unix(solaris)下运行 但推荐使用的平台仍是Linux,所以你至少需要熟悉以下内 ...
最新文章
- [改善Java代码]不要主动进行垃圾回收
- Mac git clone速度太慢
- 【Android 逆向】Android 进程注入工具开发 ( 远程调用 | x86 架构的返回值获取 | arm 架构远程调用 )
- Spark详解(六):Spark集群资源调度算法原理
- 边界化难题终结者!将自监督学习应用到自动驾驶上 | CVPR 2021
- php实现上传文件功能,简单实现php上传文件功能
- Oracle触发器的语法详解
- NodeJS Web模块
- verilog or VHDL出租车计价器电路设计
- 核心Java面试答案不正确
- 第八十九期:还在手动盖楼领喵币?双十一这群开发者竟然如此「作弊」
- Greenplum roaring bitmap与业务场景 (类阿里云RDS PG varbitx, 应用于海量用户 实时画像和圈选、透视)
- [转] Asp.net Session常见问题集锦
- 滴滴否认柳青计划卸任:目前正积极全面配合网络安全审查
- AR识别卡制作工具 1.0终于完工了
- jsp mysql demo_echart通过jsp连接查询mysql的demo - 贪吃蛇学院-专业IT技术平台
- 网页版在线客服功能实现
- 擦亮双眼,愚人节彩蛋回顾
- CSDN产品周报第31期|PC端开放账号注销功能
- English总结(一)-- 常用语句篇
热门文章
- Doing Homework HDU - 1074
- [CQOI2012] 局部极小值(状压DP + 容斥 + 搜索)
- [SOCI2005]最大子矩阵(DP) + [JXOI2018]守卫(DP) + [CQOI2016]手机号码(数位DP)[各种DP专练]
- jzoj4010-Philips and Calculator【搜索,dp】
- P4841,jzoj3303-城市规划【NTT,多项式求逆,dp】
- 【jzoj】2018/2/2 NOIP普及组——D组模拟赛
- 2018GDKOI——记录
- 【贪心】畜栏预定(ybtoj 贪心-1-3)
- Wannafly挑战赛18
- 11、mysql数据表中数据的查询(3)