Jquery 使用Rails UJS，如何从函数提交远程表单

我正在使用Rails-UJS。我有一个表单设置来执行远程提交，如下所示：

<form accept-charset="UTF-8" action="/subscriptions" class="new_subscription form-horizontal" id="new_subscription" data-remote="true" data-type="json" method="POST">

但问题是，它提交表单时没有远程服务器，而是将表单发布到服务器并刷新页面。知道为什么吗？是否有其他方式提交远程表单

---

谢谢

尝试触发

submit.rails

事件：

$("#new_subscription").trigger("submit.rails");

---

尝试自己执行Ajax请求：

$('#new_suscription').submit(function(){
  /*do whatever you want here*/
  $.post('/subscriptions',$(this).serialize(),function(){},'script');
}

---

这样，您就可以使用表单数据执行POST请求，并以脚本的形式执行响应。

也许对于那些使用

jquery ujs

（Rails 5.0默认值及以下版本）的用户，正如已经回答的那样，触发自定义jquery事件将起作用，即：

$("#new_subscription").trigger("submit.rails");

对于那些在2017年偶然发现这个问题并正在使用Rails 5.1的人来说，答案会有所不同。Rails 5.1已经放弃了作为依赖项的

jquery

，因此用一个完全重写的

Rails ujs

取代了

jquery ujs

。见：

因此，您必须在rails ujs中触发适当的

到目前为止，文档（也称为RailsGuides）中还没有发布/推荐的方法，但是这里有一些选项，您可以通过查看Rails的源代码来使用：

使用

Rails.fire

功能：

nativeFormEl = $("#new_subscription")[0] // you need the native DOM element
Rails.fire(nativeFormEl, 'submit')

您还可以通过编程方式调用

Rails.handleRemote

处理程序（通过XHR实际提交带有

data remote=true

的表单的处理程序：

nativeFormEl = $("#new_subscription")[0] // you need the native DOM element
Rails.handleRemote.call(nativeFormEl, event); // unfortunately, you cannot reference the previously created submit CustomEvent object by rails-ujs.js
//  ... or ...
Rails.handleRemote.call(nativeFormEl) // submits via XHR successfully, but throws an error after success callback at Rails.stopPropagation

---

我更喜欢选项1，因为它只是一个包装器，使用了更新的Web API方法，即创建一个

CustomEvent

并通过

dispatchEvent
将其发送到
EventTarget
，虽然这在几年前可能是正确的答案，但现在不再是这样了。因为Rails 5.1用Rails ujs取代了jquery ujs，jQuery依赖项已被删除，自定义事件已更改。我偶然发现您的答案只是为了验证这不再是答案。在我验证了最新答案后，我将重新发布。选项1是rails 5的真正解决方案！谢谢！非常有魅力。我还可以确认选项1非常有效，但是可以访问 Rails

对象在使用webpacker时，您需要先从“@Rails/ujs”导入Rails；Rails.start（）。请参阅我想添加的内容，我目前正在代码中使用以下内容：

Rails.fire（nativeFormEl，'ajax:success'）

——虽然这确实触发了

ajax:success

事件，但它传入了Rails UJS使用的

CustomEvent

的错误/旧类。新的

CustomEvent

类在

事件的键处有一个3项数组。详细信息

但旧格式没有。这很混乱，我不得不写一个愚蠢的if-then语句作为一个w在Ajax事件侦听器中正确处理代码的变通方法

nativeFormEl = $("#new_subscription")[0] // you need the native DOM element
Rails.handleRemote.call(nativeFormEl, event); // unfortunately, you cannot reference the previously created submit CustomEvent object by rails-ujs.js
//  ... or ...
Rails.handleRemote.call(nativeFormEl) // submits via XHR successfully, but throws an error after success callback at Rails.stopPropagation