javascript 如何将服务器端变量传递给HTML并让HTML页面返回自动填充的表单?

wkyowqbh  于 2022-12-17  发布在  Java
关注(0)|答案(1)|浏览(121)

我正在Google Apps Script中构建一个具有CRUD功能的HTML页面。用户目前可以添加数据、编辑数据和搜索数据(我没有添加删除功能)。我希望用户接收带有ID的表单URL链接,当他们返回到该链接时,它会自动使用以前添加的数据填充表单。
在HTML文件中,我定义了以下按钮:

document.getElementById("sbtn").addEventListener("click",getTID);

一旦用户输入了数据,数据就会被发送到Google Sheet。用户必须输入一个已经提供给他们的唯一ID。使用这个ID,他们可以输入数据,点击搜索,然后它会运行getTID():

function getTID() { //TID CODE
  var transID = document.getElementById("tid").value;
  if (transID.length === 36) {
    google.script.run.withSuccessHandler(updateAllData).getID(transID);
  } else {
    alert("Transaction ID is not long enough.\nPlease copy the Transaction ID EXACTLY!\n\nFor Example: https:/workwebsiteconcealedforprivacy/w?txid=36275284-2ed6-4868-97b2-16bc1fde1a08\n\nThe Transaction ID is: 36275284-2ed6-4868-97b2-16bc1fde1a08")
  }
}

它接受用户提供的ID,引用电子表格,然后返回通过索引找到的值。现在,我在服务器端的GS文件中有了doGet中的以下内容:

var urlValue = '';
function doGet(e) {
  // Test Code
  var ss = SpreadsheetApp.openById(id);
  var ws = ss.getSheetByName("Options");
  var list = ws.getRange(1, 1, ws.getRange("A1").getDataRegion().getLastRow(), 1).getValues();
  var htmlListArray = list.map(function (r) { return '<option>' + r[0] + '</option>'; }).join('');
  var title = "Please Work";

  var vals = JSON.stringify(e);

  if ('v' in e.parameter){
    urlValue = String(e.parameter['v']);
    //return HtmlService.createHtmlOutput(urlValue);
  }

  return render("page",{list: htmlListArray, title});

以及以下内容:

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function render(file, argsObject) {
  var tmp = HtmlService.createTemplateFromFile(file);
  if (argsObject) {
    var keys = Object.keys(argsObject);
    keys.forEach(function (key) {
      tmp[key] = argsObject[key]
    });
  }
  return tmp.evaluate();
}

如果我取消注解返回HtmlService.createHtmlOutput(urlValue);行中,我可以看到如果URL中有ID,它将返回正确的参数。
我的问题是,当用户输入带有正确参数的url时,我无法让HTML读取urlValue变量并自动运行getTID()。正确的功能是,如果找到该参数,它将自动填充HTML表单。如果没有找到,它将返回空白表单。

b1payxdu

b1payxdu1#

上有错误

return render("page",{list: htmlListArray, title});

{list: htmlListArray, title}上,缺少第二个属性的名称。
要“读取urlValue变量”有两个选项:

  • 使用doGet函数的事件对象从URL传递参数。为此,您有两种选择:从使用“vanilla”JavaScript生成的html字符串创建HtmlService.HtmlOutput对象,或者从HtmlService.HtmlTemplate对象创建它。
  • 使用google.script.url.getLocation直接在客户端代码上从URL获取参数。

如果你选择第一个选项,那么你应该通过某种方式将urlValue传递给render函数,在问题代码urlValue中是一个全局变量,所以你可以在renderreturn语句之前添加以下内容。

tmp.urlValue = urlValue;

然后你必须在html文件上添加一个scriptlet来处理这个值和“autorun”getTID。scriptlet是Templated HTML的一个特性。

相关问题