阻止 HTML 页面刷新

Question

在这个阶段，我主要习惯于后端 Javascript 和服务器端 Java，所以我的 HTML 并不像它需要的那样精通。

我已经构建了几个需要用户使用 Apps 脚本输入的应用程序，但我使用的是现在已弃用的 UI service，因为我不是设计师，这提供了一种简单的方法来设计简单的页面以传回数据和向前。 UI 服务已经被弃用了一段时间，我恳求将这些服务迁移到 HTML 服务的艰巨任务，并且我注意到行为上的一些差异。

例如，提交表单时，整个页面刷新为空白页面，我似乎无法阻止这种情况。 UI 服务将保持静态以重新输入信息，并且我找不到使 HTML 服务停止刷新或重新加载表单的工作方法。

重现我的问题的简单代码：

function doGet() {
  return HtmlService.createHtmlOutputFromFile('test')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function logValues(value){
  Logger.log('Something worked....');
}

索引文件为：

<form>
<input type="submit" value="Book Meeting" onclick="google.script.run
        .logValues()">
</form>

我尝试过的一些事情：

1) 向“doGet”函数添加回调，以尝试再次加载页面。 2) 添加一个全新的函数来尝试调用一个新的 HTML 页面。

这里的问题是我对 HTML 服务的理解很差，但是有没有一种简单的方法可以让我清除表单以重新提交，或者只是重新加载页面？我在 SO 上找到的其他问题都没有以我能理解的方式充分回答这个问题。

Answer 1

由于您在技术上是通过单击提交按钮来提交表单，因此会创建页面刷新。您需要使用 preventDefault 函数取消提交事件，该函数“如果事件可取消，则取消该事件，而不停止事件的进一步传播。”

在此处查看文档：https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

所以也许您可以尝试以下方式（直接来自文档）：

function stopDefAction(evt) {
    evt.preventDefault();
}

document.getElementById('my-checkbox').addEventListener('click', stopDefAction, false);

另一种选择是删除表单/输入元素并简单地使用按钮元素，这不会在点击时触发页面刷新。

Answer 2

切换旧的 UI 服务是一次有趣的尝试，我只是用我的一个应用程序做到了这一点，它确实提高了代码的可读性。我发布了我正在做的基本版本的副本in another question

一旦你了解它，一切都会变得简单得多。这是一个使用多个 HTML 文件的非常基本的示例，类似于您在提交表单时使用 HTMLService 的示例（您可以改为传递参数）

代码.gs

function doGet() {
  return HtmlService.createTemplateFromFile('Main')
    .evaluate()
    .setSandboxMode(HtmlService.SandboxMode.NATIVE);
}

function onLogin(form) {
  if (form.username == "fuzzyjulz") {
    var template =  HtmlService.createTemplateFromFile('Response');

    //Setup any variables that should be used in the page
    template.firstName = "Fuzzy";
    template.username = form.username;

    return template.evaluate()
      .setSandboxMode(HtmlService.SandboxMode.NATIVE)
      .getContent();
  } else {
    throw "You could not be found in the database please try again.";
  }
}

function include(filename) {
  return HtmlService.createTemplateFromFile(filename)
    .evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .getContent();
 }

Main.html

<?!= include('CSS'); ?>
<script>
  function loadPage(htmlOut) {
    var div = document.getElementById('content');
    div.innerHTML = htmlOut;
    document.getElementById('errors').innerHTML = "";
  }
  function onFailure(error) {
    var errors = document.getElementById('errors');
    errors.innerHTML = error.message;
  }
</script>
<div id="errors"></div>
<div id="content">
  <?!= include('Login'); ?>
</div>

CSS.html

<style>
  p b {
    width: 100px;
    display: inline-block;
  }
</style>

Login.html

<script>
  function onLoginFailure(error) {
    var loginBtn = document.getElementById('loginBtn');
    loginBtn.disabled = false;
    loginBtn.value = 'Login';
    onFailure(error);
  }
</script>
<div class="loginPanel">
  <form>
    <p>
      <b>Username: </b>
      <input type="text" name="username"/>
    </p>
    <input type="button" id="loginBtn" value="Login" onclick="this.disabled = true; this.value = 'Loading...';google.script.run
      .withSuccessHandler(loadPage)
      .withFailureHandler(onLoginFailure)
      .onLogin(this.parentNode)"/>
  </form>
</div>

Response.html

<div class="text">
  Hi <?= firstName ?>,<br/>
  Thanks for logging in as <?= username ?>
</div>