RoR unobtrusive scripting adapter--UJS（一些Javascript的语法糖）

Learn how the new Rails UJS library works and compares with the old version of jquery_ujs that it replaces

rails/actionview/app/assets/javascripts/..

视频：https://gorails.com/episodes/rails-ujs-primer?autoplay=1

---

 

介绍
This unobtrusive scripting support file 脚本支持Rails，但不严格绑定在任何backend,也可以用在其他任何应用.

• force confirmation dialogs for various actions;
• make non-GET requests from hyperlinks;从超级链接制作非get请求
• make forms or hyperlinks submit data asynchronously with Ajax;用Ajax制作表格或链接提交异步数据
• 当已经点击提交按钮时，自动防止多次点击，导致重复提交。

These features are achieved by adding certain data attributes to your HTML markup. 

这些功能是通过增加了data attributes到Http markup来实现的。

 

⚠️抛弃了jquery，使用coffeescript编译的。新要点：

1. You won't get jQuery anymore in your Rails 5.1 applications
2. Rails is starting to push you towards building your forms that all submit with AJAX requests

data = new FormData()

---

 

使用

 

rails app 直接在application.js中加上//= reqquire rails-ujs。

如果使用gem Webpacker或者其他的JS bundler，在主要main JS file增加以下代码：

import Rails from 'rails-ujs'; Rails.start()

 

---

 

定义了一些方便的语法糖，比如：

Rails.disableElement(document.getElementById("form_submit"))

解释：让link, button, form, formSubmit元素不能使用。还有enableElement()，让元素可以使用。

在rails/actionview/app/assets/javascripts/rails-ujs/features/disable.coffee文件中定义的。

 

remote.coffe文件有处理ajax 请求的完美案例格式：⚠️这个格式是coffee格式。

Rails.ajax(

type: method or 'GET'
url: url
data: data
dataType: dataType

# stopping the "ajax:beforeSend" event will cancel the ajax request

# 不能用beforeSend:干别的事情，否则会停止ajax:beforeSend!!
beforeSend: (xhr, options) ->
　　if fire(element, 'ajax:beforeSend', [xhr, options])
　　　　fire(element, 'ajax:send', [xhr])
　　else
　　　　fire(element, 'ajax:stopped')
　　return false

# success, complete都可以使用。
success: (args...) -> fire(element, 'ajax:success', args)
error: (args...) -> fire(element, 'ajax:error', args)
complete: (args...) -> fire(element, 'ajax:complete', args)
crossDomain: isCrossDomain(url)
withCredentials: withCredentials? and withCredentials isnt 'false'

）

 

案例：视频5.40分，我也实操成功了✌️

我写了一个只有一个输入框的表格，在chrome-inspect-console上声明一个form格式：

var data = new FormData()

data.append("post[content]", "输入的value") 　　

#post[content]是输入框的name, 具体可见webAPI, 用于附加一个新的value到一个已存在的 key

然后使用:

Rails.ajax({url: '/posts', type:"POST", data: data})

就正确提交了数据✌️，相当于submit。

解释：FormData()会创建空的表格对象。之后使用append("key", "value")附加给这个对象。

 

Rails.serializeElement()是一个UJS脚本方法。等同于使用传统的FormData(this)

data1 = new FormData(某个表格)， data1获得表格内已有的所有数据对儿。

 

Csrf.coffee文件

Rails.csrfToken()
"SGFmdd/odcWc625LdYvcwUgi3jt+ou2H7FnKtH448qEksRvE0SHRESMuWS11wNaIrXicnnibw2VDaSeHIJt/tw=="

用于生成随机token。用于api

 

form.coffee文件

Rails.serializeElement()方法，一次性得到当前表格中已经输入的所有信息。

> var data1 = Rails.serializeElement(document.getElementsByTagName("form")[0])
undefined
> data1
"utf8=%E2%9C%93&authenticity_token=LSfv%2F12dCBYWSg%2FSgNCGQ5n4oV9h1wNBQD4YxqkgAPxB95JOU1SswqmPOLSAm4wKfKLj%2BmfuLaPvDvX194ON6g%3D%3D&post%5Bcontent%5D=xzczxxcz"
> Rails.ajax({url: '/posts', type:"POST", data: data1})
undefined

数据被存入。