如何将HTML中Javascript变量传递映射到Code.gs函数中

核心原因 #

你之前的写法不生效，是因为Google Apps Script的运行逻辑是分层的：

• <?!= ?> 是服务端模板语法，只会在Code.gs渲染HTML文件的时候执行，此时客户端的JS变量today还没在浏览器里生成，根本取不到值
• 客户端浏览器里的JS变量，必须通过google.script.run接口主动传递给Code.gs的服务端函数

具体修改步骤 #

1. 修复主HTML的语法错误 #

原来的select标签内多了无效的</script>闭合标签，同时添加触发请求的交互元素，修正后代码：

<body>
<div class="block form-group">
  <label for="select">Date Range</label>
  <select id="select">
    <option selected id="today" value="today">Today</option>
    <!-- 其他可选日期选项可加在此处 -->
  </select>
</div>
<!-- 新增触发请求的按钮，也可根据需求换成下拉选择直接触发 -->
<button id="submitBtn">拉取数据</button>
<?!= include('Javascript'); ?>
</body>

2. 修改Javascript.html代码，添加客户端传值逻辑 #

通过google.script.run把选中的日期值传递给Code.gs的服务端函数：

<script>
document.getElementById('submitBtn').addEventListener('click', function() {
  // 直接取下拉框的选中值，适配多选项场景
  const datePreset = document.getElementById('select').value;
  // 调用服务端函数传值
  google.script.run
    .withSuccessHandler(function(res) {
      // 请求成功回调，可自定义数据展示逻辑
      alert('请求成功，返回数据：' + res);
    })
    .withFailureHandler(function(err) {
      // 请求失败回调，可自定义错误提示逻辑
      alert('请求失败：' + err);
    })
    .apiRequest(datePreset);
});
</script>

3. 调整Code.gs的代码，接收参数拼接请求地址 #

修正原有endpoint的语法错误和参数格式错误，补全请求逻辑：

function apiRequest (date_preset) {
  const base = 'https://graph.facebook.com/v10.0/';
  // 接收传入的date_preset参数拼接地址，补全fields参数规范
  const endpoint = `${base}act_XXXXXX/insights?date_preset=${date_preset}&fields=campaign,impressions,spend`;
  // 此处补充你的接口请求逻辑，记得配置Facebook API要求的授权信息
  const response = UrlFetchApp.fetch(endpoint, {
    headers: {
      'Authorization': 'Bearer 你的Facebook接口访问令牌'
    }
  });
  return response.getContentText();
}

补充说明 #

如果不需要点击按钮触发，可直接给select元素绑定change事件，实现选择日期后自动传值发起请求。

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