JQueryAJAX-发送带有附加文件的JSONP表单


JQuery AJAX - Sending a JSONP form with attached files

我正在为我们的客户创建一个联系人表单,该表单使用我们自己的域创建网页。我们为他们提供一个主机和一个网页编辑器来创建他们的网站。当他们在网站上创建联系表格时,无论是谁访问他们的网站并填写表格与他们联系,都会发送到我们的平台,并向我们的客户发送电子邮件,通知他/她有人填写了他的/她的联系表格。

为了使其发挥作用,我们在客户网页中使用jsonp ajax调用将表单发送到我们的平台,该平台执行电子邮件模板并发送电子邮件。

现在的问题是,我们的客户要求添加一个input字段类型,以允许访问他们页面的任何人将文件附加到表单中,这样他们就可以在联系人通知电子邮件中看到附加的文件,但我找不到使用jsonp的方法,因为它使用GET方法创建跨域请求,谈到使用CCD_ 5方法发送带有表单的文件并获得作为CCD_ 6的表单数据。

以下是我在尝试实现之前的代码:

var $form = $('form');
$form.submit(function(e){
    e.preventDefault();
    $.ajax({
        url: url,
        dataType: "jsonp",
        data: $form.serialize(),
        beforeSend: function () {
            $form.data('allowSending', false); // To prevent multiple sendings while processing
        },
        success: function(data) {
            alert(data.message);
            $form.data('allowSending', true);
        }
    });
});

这是我尝试过的代码,但没有按预期处理:

var $form = $('form');
$form.submit(function(e){
    e.preventDefault();
    $.ajax({
        url: url,
        processData: false,
        contentType: false,
        dataType: "jsonp",
        data: new FormData(this),
        beforeSend: function () {
            $form.data('allowSending', false); // To prevent multiple sendings while processing
        },
        success: function(data) {
            alert(data.message);
            $form.data('allowSending', true);
        }
    });
});

当它发送带有我尝试过的代码(第二个)的填充表单时,它会尝试通过URL将数据作为对象发送,比如:?callback=jQuery111107622947758095266_1459251318335&[object%20FormData]&_=1459251318336

我该如何解决这个问题?

提前谢谢。

谨致问候。

PS:为了让事情变得更困难,表单是完全动态的,所以如果解决方案手动传递参数等,它必须以动态的方式使用for循环。

简单的答案是你不能。

您的尝试失败是因为,由于JSONP发出GET请求,contentType被忽略,data被视为字符串(因为您说了processData: false)。

正如您所说,JSONP通过对URL中的所有内容进行编码来工作。虽然可以使用文件API读取文件的内容并将其转换为base64编码的字符串,但这将超出除最小文件外的所有文件的URL长度限制,这使得它不切实际。

停止使用JSONP。坦率地说,这是一个肮脏的黑客行为,被用来绕过同源政策。我们现在有了CORS,这是一种标准的、非黑客的、高度灵活的方法,可以选择性地禁用同源策略。其灵活性的优点之一是可以使用它进行跨来源POST请求。