You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Google Script中HTML按钮调用doGet()函数出现Cannot read property 'parameter' of undefined错误求助

问题分析与解决方案

这个错误的核心原因很明确:doGet()是Google Apps Script的服务器端专用函数,它只有在用户通过Web App的URL访问时,才会由Google服务器自动传入包含URL参数的e对象。但你在HTML按钮的onclick事件里直接调用doGet(),这是在浏览器的客户端环境执行,没有传入任何参数,所以eundefined,访问e.parameter自然就抛出类型错误了。

正确的解决思路

我们需要把服务器端逻辑(写入Google Sheet的操作)和客户端交互(按钮点击、页面渲染)彻底分开:

  1. doGet()只负责渲染HTML页面,并把URL参数传递给页面;
  2. 新建一个独立的服务器端函数处理订单提交;
  3. 在HTML里用google.script.run(Google Apps Script官方的客户端-服务器通信API)调用这个新函数,传递参数并处理结果。

修改后的完整代码

1. 服务器端代码(Code.gs)

function doGet(e) {
  // 把URL参数传递给HTML模板
  var template = HtmlService.createTemplateFromFile('index');
  template.urlParams = e.parameter;
  return template.evaluate().setTitle('Modulo di Ordine');
}

function submitOrder(params) {
  try {
    var ID = '1sl0P4auOdX8i67kZ9LA8dGXm59I_fc_tSOaPaOpL1Ek';
    var Cartella = SpreadsheetApp.openById(ID);
    var Foglio = Cartella.getSheets()[0];
    
    // 获取当前已插入的行数并自增
    var Cella_R = Foglio.getRange(2,5);
    var Inserite = Cella_R.getValue() + 1;
    Cella_R.setValue(Inserite);
    
    var Riga = Inserite + 2;
    var result = 'Codice Ordine: #' + Riga;
    
    // 处理日期和时间
    var Giorno_Ora = new Date();
    var Data = Utilities.formatDate(Giorno_Ora, "Europe/Rome", 'dd/MM/yyyy');
    var Orario = Utilities.formatDate(Giorno_Ora, "Europe/Rome", 'HH.mm.ss');
    
    // 写入日期和时间
    Foglio.getRange(Riga,1).setValue(Data);
    Foglio.getRange(Riga,2).setValue(Orario);
    
    // 处理各个参数
    for (var parametro in params) {
      var valore = Pulisci(params[parametro]);
      switch (parametro) {
        case 'P':
          Foglio.getRange(Riga,3).setValue(valore);
          result += '\nProdotto: ' + valore;
          break;
        case 'C':
          Foglio.getRange(Riga,5).setValue(valore);
          result += '\nCliente: ' + valore;
          break;
        case 'Q':
          Foglio.getRange(Riga,4).setValue(valore);
          result += '\nQuantità: ' + valore + ' pezzi';
          break;
        default:
          result += "\n\nParametri non validi!. L'ordine non verrà preso in considerazione";
      }
    }
    
    result += '\n\nEseguito con successo! Qualcuno provvederà a prendere in considerazione il suo ordine.';
    return result;
  } catch (err) {
    return 'Errore durante l\'invio dell\'ordine: ' + err.message;
  }
}

function Pulisci(value) {
  return value.replace(/^["']|['"]$/g, "");
}

2. 客户端HTML代码(index.html)

<!DOCTYPE html>
<html>
<head>
  <title> Modulo di Ordine </title>
  <script type="text/javascript">
    // 从服务器端模板获取URL参数
    const urlParams = <?= JSON.stringify(urlParams) ?>;
    
    function confirmOrder() {
      // 调用服务器端的submitOrder函数,传递参数
      google.script.run
        .withSuccessHandler(displayResult)
        .withFailureHandler(displayError)
        .submitOrder(urlParams);
    }
    
    function displayResult(result) {
      // 显示成功结果,替换页面内容或者弹出提示
      document.body.innerHTML = '<pre>' + result + '</pre>';
    }
    
    function displayError(error) {
      document.body.innerHTML = '<p style="color:red;">' + error + '</p>';
    }
  </script>
</head>
<body>
  <p>Sicuro di voler procedere con l'ordine?</p>
  <br>
  <input type="button" value="Conferma Ordine" onclick="confirmOrder();" />
</body>
</html>

关键改动说明

  • 分离逻辑doGet()现在只负责渲染HTML,把URL参数通过模板传递给页面;submitOrder()专门处理写入Sheet的业务逻辑,避免了直接调用doGet()的问题。
  • 客户端-服务器通信:用google.script.run来调用服务器端函数,这是Google Apps Script官方推荐的客户端与服务器交互方式,它会自动处理参数传递和结果返回。
  • 错误处理:添加了try-catchwithFailureHandler,能更友好地处理执行过程中可能出现的错误。

内容的提问来源于stack exchange,提问作者user16176087

火山引擎 最新活动