Rails - 表单在AJAX调用期间不提交任何数据 - 文件上载 - 422状态代码

Question

我在尝试使用bootsy gem上传文件时遇到了问题,但问题与bootsy本身无关.Bootsy生成一个具有以下定义的表单:

<form class="bootsy-upload-form form-inline" id="new_image" data-type="json" enctype="multipart/form-data" action="/bootsy/image_galleries/67/images" accept-charset="UTF-8" data-remote="true" method="post">
<input name="utf8" value="?" type="hidden">
<input name="authenticity_token" id="authenticity_token" value="1pQMR5j33OKupMg4TSnQafLQx1BxzWjkP1KqTfZafqDRfGqwB8r2J4FzRE+dyuoHVOw/W0qd1FZ1JoJsJFThDQ==" type="hidden">
...

当我尝试上传文件时,执行以下行:

this.uploadInput.closest('form').submit();

我之前添加了警报,所以我会看到表单的序列化数据是如何显示的,所有字段都按预期显示(包括真实性标记等):

alert(this.uploadInput.closest('form').serialize());

提交表单时,在POST请求期间没有数据发送,只有标题,在浏览器检查器中看不到任何内容,在rails的日志文件中看不到任何内容,它只是如下所示:

Started POST "/bootsy/image_galleries/47/images" for ::1 at 2016-02-05 11:20:04 +0100
Processing by Bootsy::ImagesController#create as HTML
Parameters: {"image_gallery_id"=>"47"}
Can't verify CSRF token authenticity
Completed 422 Unprocessable Entity in 0ms (ActiveRecord: 0.0ms)
FATAL -- : 
ActionController::InvalidAuthenticityToken - ActionController::InvalidAuthenticityToken:
_ actionpack (4.2.4) lib/action_controller/metal/request_forgery_protection.rb:181:in `handle_unverified_request'_

我在表单中生成了真实性令牌,我在元标记中有令牌,一切看起来都很好,没有任何错误被抛出.我还尝试创建类似于我的真实项目的示例应用程序,它按预期工作,形成正常提交的数据 - 当我尝试比较HTML代码和附加到两者的javascript事件时,它们几乎相似,因为其他因为其他部分宝石像ajax_pagination等,但没有任何部分,这应该导致这样的行为.

我正在使用Rails 4.2.4,使用body元素上的属性data-no-turbolink禁用turbolinks,项目使用bootstrap并包含JS库,如jQuery,下划线,欧芹,momentjs.

我会很感激任何想法,可能出错的原因,为什么表单不应该提交任何数据,哪里可能是一个问题.提前感谢任何提示.

更新: 为了澄清事情,我在使用AJAX发送之前拍摄了一个状态 - 这个javascript是jQuery的jquery_ujs = RoR适配器的一部分.您可以看到,该数据包含发送前的所有表单域:

但是数据不会发送到服务器:

另一方面,在我的第二个工作项目中,正在发送数据:

更新2: 只是一些信息,bootsy gem,负责创建表单使用remotipart将文件附加到请求.仍然......我正在调试javascript并且无法识别问题.这两个项目都有相同版本的jquery和remotipart,也是相同版本的rails.看起来这将是一个谜.

更新3: 所以我几乎解决了这个问题 - 上传现在正在运行,看起来这是javascript库的顺序问题.我会在确定确切问题后立即发布结果 - 我将反转更改并尝试再次修复它.

Answer 1

问题在于 application.js 中包含的 javascript 库的顺序。Bootsy 是在 jquery-fileupload 之后定义的。看来，Bootsy 必须在它之前定义，通过这种设置，两者都可以正常工作。所以先声明一下：

//= require jquery-fileupload
//= require bootsy
//= require bootsy/locales/cs.js

之后（工作）：

//= require bootsy
//= require bootsy/locales/cs.js
//= require jquery-fileupload