停止頁面通過AJAX提交Google表單後重定向

Question

我使用AJAX和Google電子表格通過從表單字段獲取POST數據並通過Google表單將其發送到電子表格，從而爲通訊收集電子郵件數據。我無法讓代碼阻止該頁面重定向到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>