Jquery 当表单中存在文件字段时，Rails不发出Ajax请求 问题摘要

根据，当将

表单_与
一起使用时，Rails默认会发出Ajax请求。我需要一个Ajax请求，但我发现有一种情况是，会发出一个标准的浏览器请求。我很想知道我做错了什么，以及如何修复它

所需的行为：表单提交时会发出Ajax请求，这样我就可以返回只会更改部分显示页面的JavaScript

当前行为：由于路由仅为XHR，正在发出标准浏览器请求，请求为404s。（如果我让所有请求都可以访问路由，则整个页面将被替换，这仍然是非常不可取的。）

代码
以下是生成表单的代码：

<%= form_with(url: restore_path,
              method: 'post',
              multipart: true,
              id: 'restore-form') do %>

  <label for="file">Backup file:</label>
  <%= file_field_tag 'backup_file', required: true %>

  <%= submit_tag('Restore',
                 id: 'restore-submit-button',
                 class: 'btn btn-primary',
                 data: { disable_with: 'Restoring...' }) %>

<% end %>

…提交表单会导致404，因为请求是标准浏览器请求

我在调试时发现了一个奇怪的地方
如果我将字段从
文件\字段\标记
更改为
文本\字段\标记
，请求将作为Ajax提交。当我改变

<%= file_field_tag 'file', required: true %>



到



在其他一切都保持不变的情况下，按照预期发出了Ajax请求。生成的HTML中唯一的变化（除了真实性标记的确切值之外）是



更改为

<input type="text" name="test_field" id="test_field" required="required">



…正如人们所预料的那样。但是表单提交行为完全改变了

回购协议
该项目是开源的；上述代码位于

还有一件事我试过了
我从头开始创建了一个新的Rails应用程序，看看是否可以重现这个问题，但我做不到。即使存在文件上载，也会发出Ajax请求

停！
我的点子快用完了。我做错了什么？当存在文件字段时，如何使还原表单发出Ajax请求？
明白了。文档假设我正在使用
rails-ujs
适配器来实现不引人注目的JavaScript（它是从rails 5.1开始内置的）。我的应用程序是在Rails 4时代创建的，使用了旧的
jquery ujs
适配器

浏览器不会以本机方式发送包含文件上传的Ajax请求
rails-ujs
对此有一个内置的解决方法，但是jquery-ujs
没有

从这里开始有两种方法

长期的解决方案是切换到
rails-ujs
，它目前作为rails的一部分进行维护。（在撰写本文时，
jquery-ujs
已经两年半没有更新了。）

不幸的是，这两个适配器存在一些接口差异，因此可能需要在整个应用程序的JavaScript中进行一些更改。有关详细信息，请参阅

快速修复？好吧，这是有道理的。（文档表明它是针对Rails 3的，但在我的应用程序中，它就像一个魔咒，在撰写本文时，我的应用程序正在运行Rails 6.0.3.3。）

添加到
Gemfile
：

gem 'remotipart', '~> 1.4.4'

添加到
app/assets/javascripts/application.js
（在现有的
jquery\u ujs
行之后）：

它是有效的。请求是通过Ajax发出的。它没有问题地点击了我的XHR-only路径，并呈现了一个只更新页面一部分的JavaScript视图

胜利
 不需要rails-ujs而不是jquery-ujs吗？@Eyeslandic可以让它工作，但是
jquery-ujs
和
rails-ujs
之间的接口有点不同，所以我需要对现有代码进行多次更改，如下所述：。在某个时候这样做是个好主意，因此我使用了一个更为更新的库，但是
remotipart
gem是一个不需要任何进一步更改的插件。至少这是我现在需要的。好吧，如果它对你有效，那就太好了。@Eyeslandic谢谢你的输入。我对答案进行了编辑，以反映这两种选择，以及它们的优缺点。
<input type="file" name="file" id="file" required="required">

<input type="text" name="test_field" id="test_field" required="required">

gem 'remotipart', '~> 1.4.4'

//= require jquery.remotipart