Google Sheet提交数据后HTML页面重载延迟，表单数据未即时清除

我在HTML页面中集成了Google Sheet，提交数据后数据可正常显示在Google表格中，但页面重载并清除表单原有数据时存在数秒的明显延迟，表单数据仍会在页面上显示一段时间。

HTML表单代码 #

<form action="https://script.google.com/macros/s/AKfycbyge9dyR6OtyfE2lir6f4cI32kX-7QSSRAqEgIILZeR4Z2M3JSQqoPdDheuImIkwpRg/exec" method="post" id="add-form" name="contact-form">
    <input type="text" name="Name"  class="form-control" placeholder="Ім'я" required="required">
    <input type="email" name="Email"  class="form-control" placeholder="Почта" required="required">
    <input type="text" name="Mobile"  class="form-control" placeholder="Мобільний" required="required">
                
    <textarea type="text" class="form-control" name="Message" placeholder="Побажання" required="required"></textarea>
    <button type="submit" class="site-btn">Відправити</button>
</form>

Google Apps Script代码 #

const sheetName = 'dataSite'
const scriptProp = PropertiesService.getScriptProperties()

function intialSetup () {
  const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
  const lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    const sheet = doc.getSheetByName(sheetName)

    const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    const nextRow = sheet.getLastRow() + 1

    const newRow = headers.map(function(header) {
      return header === 'Date' ? new Date() : e.parameter[header]
    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }
}

页面JavaScript代码 #

$(document).ready(function() {
    $("#add-form, #add-form2").submit(function(event) {
        event.preventDefault(); // Prevent the default form submission behavior
        alert('Повідомлення Відправлено !');

        $.ajax({
            type: "POST",
            url: $(this).attr("action"),
            data: $(this).serialize(),

            error: function(xhr, status, error) {
                // Handle the error (if needed)
                console.error(xhr.responseText);
            },
            success: function(response) {
                // After successful form submission, reset the form
                $("#add-form, #add-from2")[0].reset();
                window.close();
            }
        }).then(function() {
            // Reload the page after successful AJAX request
            window.location.reload();
        });
    });
});

问题原因及解决方法 #

核心原因 #

1. alert阻塞线程：弹窗会暂停浏览器所有后续操作，必须等用户点击确定才会执行AJAX请求，直接造成第一波延迟。
2. 逻辑顺序混乱：success回调里的表单重置操作，被.then()绑定的页面重载覆盖，且window.close()在非弹窗页面下无效，导致表单重置时机晚于页面重载触发，数据会保留到页面刷新完成。
3. 拼写错误：#add-from2是笔误，应为#add-form2，导致第二个表单无法被重置。

修复方案 #

1. 移除阻塞线程的alert，改用页面内非阻塞提示（比如新增临时提示元素）。
2. 调整逻辑：发起AJAX请求后立即禁用提交按钮防止重复提交，请求成功后先重置表单，再按需决定是否重载页面（若仅需清空表单，重载完全没必要）。
3. 修正拼写错误，确保所有表单能被正确重置。

修改后的JavaScript代码示例 #

$(document).ready(function() {
    $("#add-form, #add-form2").submit(function(event) {
        event.preventDefault();
        const $form = $(this);
        const $submitBtn = $form.find('button[type="submit"]');
        
        // 禁用按钮防止重复提交
        $submitBtn.prop('disabled', true).text('Відправлення...');

        $.ajax({
            type: "POST",
            url: $form.attr("action"),
            data: $form.serialize(),
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
                // 恢复按钮状态并提示错误
                $submitBtn.prop('disabled', false).text('Відправити');
                alert('Помилка відправлення!');
            },
            success: function(response) {
                // 立即重置当前表单
                $form[0].reset();
                // 恢复按钮状态
                $submitBtn.prop('disabled', false).text('Відправити');
                // 非阻塞提示示例：页面内临时通知
                $('<div style="padding:10px;background:#4CAF50;color:white;position:fixed;top:20px;right:20px;">Повідомлення відправлено!</div>')
                    .appendTo('body')
                    .fadeOut(3000);
                
                // 如需重载页面，放在此处执行
                // window.location.reload();
            }
        });
    });
});

内容的提问来源于stack exchange，提问作者Vladislav Kolesnik