在Apps Script Web App中用表格数据更新文本框功能遇阻

你的代码存在三个核心问题：

• google.script.run是异步执行逻辑，调用后无法立即获取返回结果，直接后续赋值会找不到目标变量
• 后端函数错误返回HTML页面对象，实际只需返回查询到的歌手、标题数据即可
• 前端试图直接访问后端定义的变量（foundSongArtist、foundSongTitle），前后端运行环境完全隔离，变量无法跨环境直接调用

修正后的前端代码（page.html） #

<script>
function GetData(){
  var link = document.getElementById("songLink").value.trim();    
  // 用withSuccessHandler接收后端返回数据，指定回调函数处理更新
  google.script.run
    .withSuccessHandler(updateSongInfo)
    .GetSongRecord(link);
}

// 回调函数：利用后端返回的数据更新输入框
function updateSongInfo(songData){
  document.getElementById("songArtist").value = songData.artist;
  document.getElementById("songTitle").value = songData.title;
}
</script>

<input class="form-control form-control-sm" type="text" aria-label="default input example" id="songLink" name="songLink" style="background-color:#eee">

<div class="col-1" style="padding: 5px; padding-top: 23px;">
  <button class="btn btn-primary align-bottom" id="getSongButton" value="Retrieve" onclick="GetData()" style="width:100px">Retrieve</button>
</div>

<label for="songArtist">Artist: </label>
<input class="form-control form-control-sm" type="text" aria-label="default input example" id="songArtist" name="songArtist"  style="background-color:#eee">

<label for="songTitle">Title: </label>
<input class="form-control form-control-sm" type="text" aria-label="default input example" id="songTitle" name="songTitle"  style="background-color:#eee">

修正后的后端代码（code.gs） #

function GetSongRecord(link){
  var url= SSL_SHEET_ADDRESS;
  var ss = SpreadsheetApp.openByUrl(url);
  var webAppSheet = ss.getSheetByName("SheetName");

  // 保留你原本的查询数据逻辑，替换下方模拟值即可
  var foundSongArtist = "song artist found";
  var foundSongTitle = "song title found";

  // 返回包含数据的普通对象，供前端回调函数接收
  return {
    artist: foundSongArtist,
    title: foundSongTitle
  };
}

关键说明 #

1. 异步回调机制：withSuccessHandler()会在后端函数执行完成并返回数据后，自动触发传入的回调函数，确保拿到有效数据后再更新页面
2. 轻量化数据传递：后端仅返回纯数据对象，无需重新生成HTML页面，避免不必要的渲染开销
3. 环境隔离处理：前后端运行环境独立，必须通过函数返回值的方式完成数据交互

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