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

$.ajax form submit to Google Docs using JSONP: "Resource interpreted as Script but transferred with MIME type text/html"

本文关键字：MIME 类型 脚本 text html 资源 传输 JSONP 提交 表单 ajax      更新时间：2023-09-26

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

背景

  • 我有一个表单提交，我需要将其提交到谷歌文档表单
    • 不幸的是，对于给定的情况来说，这是一个硬性要求
  • 我需要创建一个网页作为这个表单的更好界面（长话短说：人们将使用iPad输入信息，它需要谷歌表单默认没有的某些UI触摸）
  • 我可以通过HTML表单的"操作"进行提交；但是，我需要覆盖表单提交，这样我就可以在客户端执行一些自定义编码器，通过Ajax提交表单，然后为新条目清除表单

目标

  • 单击提交按钮后，通过Ajax提交表单，并根据响应的成功或失败进行操作

问题/问题

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

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

我该如何避免这种情况？有没有什么方法可以在不触发这个问题的情况下将这些数据提交到谷歌表单？

迄今为止的代码

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);
                });

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

以下是一种抑制错误的方法，尽管在某些浏览器中仍然会在控制台中记录警告（但没有错误！）

这里有一个例子，我用来记录用户提供给谷歌表单的电子邮件地址：

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可能就是你发布的：https://docs.google.com/forms/d/FORM_IDENT/formResponse

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

相关文章：