Google Apps Script登录表单提交后跳转未知地址并报HTTP 0错误

问题描述 #

我要制作一个简单的登录表单，但点击提交后页面会跳转到地址https://n-hb3iawsdao7vaebunzezdpvnz2lfhrti7vfmd3a-0lu-script.googleusercontent.com/userCodeAppPanel?，并抛出错误：

Uncaught NetworkError: Connection failure due to HTTP 0

如果不用<form>标签包裹元素，功能一切正常，但因为<input>需要required属性做必填验证，所以必须保留<form>标签。

问题原因 #

<form>标签默认的提交行为会发起同步HTTP请求并刷新页面，这会中断google.script.run的异步请求，导致请求失败出现HTTP 0错误，同时浏览器会跳转到表单的action地址（未指定时默认跳当前页面）。

解决方法 #

阻止<form>的默认提交行为，让表单只执行自定义的loginUser函数，不触发页面跳转。两种实现方式可选：

方式1：在函数中阻止默认行为 #

修改HTML的<form>标签，传递event参数：

<form onsubmit="loginUser(event)">

修改JavaScript函数，添加阻止默认行为的代码：

function loginUser(event) {
  // 阻止表单默认提交逻辑
  event.preventDefault();
  
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  
  google.script.run.withSuccessHandler(function(output) {
    if(output == 'TRUE') {
      // 此处添加登录成功后的处理逻辑
      console.log("登录成功");
    } else if(output == 'FALSE') {
      // 此处添加登录失败后的处理逻辑
      console.log("用户名或密码错误");
    }
  }).checkLogin(username, password);
}

方式2：在onsubmit事件中直接返回false #

修改HTML的<form>标签：

<form onsubmit="loginUser(); return false;">

这种方式无需修改loginUser函数，return false会直接阻止表单的默认提交行为。

完整代码示例 #

Code.gs #

function checkLogin(username, password) {
  var url = ''; // 此处填入你的Spreadsheet URL

  var ss= SpreadsheetApp.openByUrl(url);
  var webAppSheet = ss.getSheetByName("users");
  var getLastRow =  webAppSheet.getLastRow();
  var found_record = '';
  for(var i = 1; i <= getLastRow; i++) {
    if(webAppSheet.getRange(i, 2).getValue() == username && 
       webAppSheet.getRange(i, 4).getValue() == password) {
      found_record = 'TRUE';
    }    
  }
  if(found_record == '') {
    found_record = 'FALSE'; 
  }

  return found_record;
}

修改后的HTML #

<div class="limiter">
  <div class="container-login100" style="background-color: slategrey;">
    <div class="wrap-login100">
      <form onsubmit="loginUser(event)">
        <span class="login100-form-logo">
          <img src="sample.png" border="0">
        </span>

        <span class="login100-form-title p-b-34 p-t-27">
          Intranet
        </span>

        <div class="wrap-input100 validate-input" data-validate = "Enter username">
          <input class="input100" type="text" id="username" placeholder="Username" required>
          <span class="focus-input100" data-placeholder="&#xf207;"></span>
        </div>

        <div class="wrap-input100 validate-input" data-validate="Enter password">
          <input class="input100" type="password" id="password" placeholder="Password" required>
          <span class="focus-input100" data-placeholder="&#xf191;"></span>
        </div>

        <div class="container-login100-form-btn">
          <button type="submit" class="login100-form-btn">
            Login
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

修改后的JavaScript #

function loginUser(event) {
  event.preventDefault();
  
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  
  google.script.run.withSuccessHandler(function(output) {
    if(output == 'TRUE') {
      console.log("登录成功");
      // 可添加页面跳转或其他成功逻辑
    } else if(output == 'FALSE') {
      console.log("登录失败");
      // 可添加错误提示逻辑
    }
  }).checkLogin(username, password);
}

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