在 2 个 rails 应用程序之间发布表单，包括文件

Question

我正在尝试将表单从一个 rails 应用程序发布到另一个托管在不同域上并包括文件的表单。

我尝试过：

$(document).on("click", ".application-form .submission input", function(e){
    e.preventDefault();
    var form = $(".application-form form");
    var data = new FormData(form);
    var url = "http://example.com/action";
    $.ajax({
        url: url,
        type: 'POST',
        success: function(){
            alert('success');
        },
        error: function(){
            alert('error');
        },
        data: data,
        cache: false,
        contentType: false,
        processData: false
    });
});

但是远程服务器没有收到任何数据，params 只包含控制器名称和操作。

我也尝试过使用 remotipart 并使用form_for(@application, url: "http://example.com/action", html: {multipart: true}, remote: true) 设置我的表单，如果我包含一个文件，服务器会收到[object Object] 而不是正确的参数名称和值。如果我不包含文件，则参数会正确发送和接收，但我需要在上传时包含文件。

当我包含一个文件时，是什么导致[object Object] 替换了我的所有表单数据？使用远程 1.2.1。而且我见过this，它不适用。

Answer 1

尝试做自己会遇到很多问题：

1. 跨域请求 (CORS)
2. 表格
3. 上传中

---

CORS

您的第一个问题是您必须确保能够在两个域之间传递数据。 CORS 是一种标准协议，您只能将请求发送到预先批准的域

基本上，您需要某种方式将可能的连接域列入白名单，而在 Rails 中，您最好使用 RACK-CORS gem

我将首先确保在您的“接收”域上设置此设置

---

表格

其次，提交时需要编译正确的表单数据

我会使用.serialize() 函数：

$(document).on("click", ".application-form .submission input", function(e){
    e.preventDefault();
    var form = $(".application-form form");
    var data = form.serialize();
    var url = "http://example.com/action";
    $.ajax({
        url: url,
        type: 'POST',
        success: function(){
            alert('success');
        },
        error: function(){
            alert('error');
        },
        data: data,
        cache: false,
        contentType: false,
        processData: false
    });
});

这可能会解释缺少发送到您的其他域的参数

---

上传

上传文件带来了一个全新的问题，因为通过 ajax 让文件上传过程工作需要很多时间

有JQuery-FileUpload-Rails等插件可以让你通过ajax上传文件。据我了解，这是通过提供自定义中间件来处理通过 ajax 上传的文件来实现的。我不完全确定它是如何工作的，但我知道它确实如此，因为我们已经多次使用了 t

Answer 2

一般来说，您不能通过 AJAX 直接从表单上传文件。您必须使用隐藏的 iframe、Flash 或类似的东西来“伪造”它（在最新的浏览器中可能会有所不同）。 jQuery Form 插件在简化这方面做得很好，还有很多其他插件可以帮助解决这个问题。