阻止 HTML 页面刷新

Question

在这个阶段，我主要用于后端 Java 脚本和服务器端 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 服务的了解不多，但是有没有一种简单的方法可以让我清除表单以重新提交，或者只是重新加载页面？ None 我在 SO 上发现的其他问题以我能理解的方式充分回答了这个问题。

Answer 1

由于您在技术上是通过单击提交按钮来提交表单的，因此这会创建页面刷新。需要用preventDefault函数取消提交事件，"Cancels the event if it is cancelable, without stopping further propagation of the event."

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

所以也许你可以尝试这些方法（直接来自文档）：

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

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

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

Answer 2

切换旧的 UI 服务是一个有趣的过程，我刚刚用我的一个应用程序做到了，它确实提高了代码的可读性。我发布了一份我正在做的事情的基本版本 in another question

一旦你全神贯注，它就会变得简单得多。这是一个使用多个 HTML 文件的非常基本的示例，类似于您在提交表单时使用 HTML 服务的示例（您可以改为传入参数）

Code.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>

阻止 HTML 页面刷新

Prevent HTML Page Refresh

html

forms

web-applications

google-apps-script