1

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

背景

  • 我需要向 Google 文档表单提交表单
    • 不幸的是，对于给定的情况，这是一个硬性要求。
  • 我需要创建一个网页作为此表单的更好界面（长话短说：人们将使用 iPad 输入信息，并且它需要谷歌表单默认情况下没有的某些 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);
                });
4

2 回答 2

0

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

于 2014-11-12T03:57:33.337 回答
0

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

不是执行 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 可能就是您发布的内容： https ://docs.google.com/forms/d/FORM_IDENT/formResponse

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

于 2014-12-04T23:04:59.423 回答