$ .ajax表单使用JSONP提交给Google文档：“资源解释为脚本，但以MIME类型text / html传输”

Question

更新：问题已更改以反映对JSONP的使用，并且出现了新问题，因此我更改了问题。

背景

• 我需要向Google文档表单提交表单提交
  • 不幸的是，这是给定情况的硬性要求。
• 我需要创建一个网页作为此表单的更好界面（长话短说：人们将使用iPad输入信息，并且需要Google表单默认不具有的某些UI触摸）。
• 我可以通过HTML表单的“操作”进行提交； 但是，我需要重写表单提交，以便可以在客户端执行一些自定义编码器，通过Ajax提交表单，然后清除表单中的新条目。

目标

• 单击提交按钮后，请通过Ajax提交表单，然后根据响应的成功或失败执行某些操作。

问题/问题

我在Chrome控制台中看到以下错误（省略了表单键）；

资源被解释为脚本，但以MIME类型text / html传输

如何避免这种情况？ 我有什么办法可以在不触发此问题的情况下将数据提交到Google表单？

到目前为止的代码

HTML页面：

<form id="ss-form" name="googleform" class="pure-form pure-form-aligned">
    <!-- Fields omitted for brevity -->
    <input type="submit" class="pure-button pure-button-primary" id="btnSubmit" />
</form>

JavaScript：

    $(document).ready(function () {
        console.log("Document Ready");
        disableFormSubmissionEvent();
        wireUpSubmitButton();
    });

        disableFormSubmissionEvent = function () {
            console.log("Disabling sumission Event");
            $('#ss-form').submit(function () {
                return false;
            });

    wireUpSubmitButton = function () {
        console.log("Wiring up submit button");
        $("#btnSubmit").click(function () {
            submitForm();
        });

尝试提交表单的JavaScript（省略了表单密钥）：

  submitForm = function (event) {
            console.log("obtaining form data");
            var thedata = $('#ss-form').serialize();
            console.log("Attempting Form Submission");
            var submissionUrl = "https://docs.google.com/forms/d/[...]/formResponse";
            $.ajaxSetup({ cache: false });
            $.ajax({
                type: 'GET',
                dataType: 'jsonp',
                crossDomain: true,
                url: submissionUrl,
                data: thedata
            }).success(function () {
                clearForm();
                showSuccessMessage();
            }
                    )
                .fail(function (jqXHR, textStatus, errorThrown) {
                    showFailureMessage(jqXHR, textStatus, errorThrown, submissionUrl);
                });

Answer 1

Google doc响应返回一个html页面，因此没有json / jsonp，它是跨域的。 我的建议是在您的网站上建立一个代理，该代理将提交给Google文档并返回json

Answer 2

这是一种抑制错误的方法，尽管在某些浏览器中您仍会收到一条警告记录到控制台（尽管没有错误！）。

加载图像，而不是执行JSONP请求，这是我用来记录用户提供给Google表单的电子邮件地址的示例：

var src = '//docs.google.com/a/MY_GOOGLE_DOCS_DOMAIN/forms/d/FORM_IDENT/formResponse?entry.INPUT_ID=' + encodeURI(emailAddress);

window.email_submit_beacon = $('<img/>', {
  'src':src
});

我不确定100％是否需要window.email_submit_beacon分配，但是我认为最好强制浏览器将图像保留在内存中，以便在图像请求完成之前不将其卸载。

另请注意，我正在使用自定义域，对于您来说，URL可能就是您发布的URL： https : //docs.google.com/forms/d/FORM_IDENT/formResponse

如果您想知道请求何时完成，可以只查看图像何时加载（这类似于使用JS进行图像预加载的方式）。