通过 AJAX 提交谷歌表单后停止页面重定向

Question

我正在使用 AJAX 和 google 电子表格通过从表单字段中获取 POST 数据并通过 google 表单将其发送到电子表格来收集时事通讯的电子邮件数据。我无法获得阻止页面重定向到谷歌感谢页面的代码。这是下面的 AJAX 和表单代码。

<form class="form-inline" role="form" action="https://docs.google.com/forms/d/1TEPXPqigGuN8sayYjz-sk6H-5wAbPaImsgadM2PBFAk/formResponse" method="POST" id="newsletter-form" target="_self" onsubmit="">
    <input type="text" name="entry_291075079" value="" class="form-control" id="Email" dir="auto" placeholder="example@site.com"> 
</form>

<script>
    $("#newsletter-form").submit(function(e) {
        e.preventDefault();
        $.ajax({
            url: "https://docs.google.com/forms/d/1TEPXPqigGuN8sayYjz-sk6H-5wAbPaImsgadM2PBFAk/formResponse",
            data: $(this).serialize(),
            type: "POST",
            dataType: "xml",
            success: function(data) {
                console.log('Submission successful');
            },
            error: function(xhr, status, error) {
                console.log('Submission failed: ' + error);
            }
        });
    });
</script>

Answer 1

您的页面正在被重定向，因为它正在通过 POST 进行标准表单提交 - 您的 javascript 代码根本没有附加到表单提交中。要执行您需要的操作，您可以将 JS 代码附加到表单的 submit 事件，并使用 preventDefault() 停止提交，如下所示：

<script>
    $('#ss-form').submit(function(e) {
        e.preventDefault();
        $.ajax({
            url: "url to google form responses",
            data: $(this).serialize(),
            type: "POST",
            dataType: "xml",
            success: function(data) {
                console.log('Submission successful');
            },
            error: function(xhr, status, error) {
                console.log('Submission failed: ' + error);
            }
        });
    });
</script>