调用google.run.script无报错，需排查服务端与客户端数据类型匹配问题

Hey, let's tackle the two issues you're facing: the silent failure of google.run calls and data type mismatches between your client-side HTML/JS and server-side Google Apps Script (GAS). Here's a step-by-step breakdown to fix them:

1. Why google.run isn't throwing errors but isn't working? #

When google.run doesn't throw errors but does nothing, it's almost always one of these common pitfalls:

• Your server-side function isn't accessible: In code.gs, make sure your function isn't private (no leading underscore like _myFunction) and doesn't have overly restrictive permissions. For basic use cases, a simple function works:

  function processForm(formData) {
    // Handle your form data here
    return "Form processed successfully!";
  }
  

• You're missing callback handlers: google.run is asynchronous—without success/failure callbacks, you'll never know if it executed or failed. Add them to catch hidden issues:

  function lSubmit(formObj) {
    const x = $("#output");
    x.html('Wait until verified....');
    
    google.script.run
      .withSuccessHandler((response) => {
        x.html(`Verified: ${response}`);
      })
      .withFailureHandler((error) => {
        x.html(`Oops, something went wrong: ${error.message}`);
      })
      .processForm(formObj); // Replace with your actual server function name
  }
  

  The failure handler will surface errors you didn't see before, like permission issues or typos in function names.
• Form inputs lack name attributes: When passing the form DOM object to GAS, only inputs with a name attribute get included in the data. Double-check your inputs:

  <!-- Good: has name attribute -->
  <input type="text" name="username" id="username">
  <!-- Bad: no name, won't be sent to server -->
  <input type="text" id="age">
  

2. Fixing data type mismatches between client and server #

GAS uses JavaScript too, but there are a few edge cases where data types get messed up:

• Dates: Client-side Date objects get converted to strings in transit. Parse them back to Date on the server:

  // Client: Send date as ISO string (more reliable)
  const clientDate = new Date().toISOString();
  google.script.run.processDate(clientDate);
  
  // Server: Parse back to Date
  function processDate(dateStr) {
    const serverDate = new Date(dateStr);
    // Do something with serverDate
  }
  

• Complex objects: Custom objects with methods lose their methods when sent to the server. Stick to plain data objects, or serialize to JSON if needed:

  // Client: Serialize complex data to JSON
  const complexData = { name: "Alice", preferences: ["dark mode", "notifications"] };
  const jsonStr = JSON.stringify(complexData);
  google.script.run.processComplexData(jsonStr);
  
  // Server: Parse JSON back to object
  function processComplexData(jsonStr) {
    const data = JSON.parse(jsonStr);
    // Work with data
  }
  

• Numbers from form inputs: Form inputs always return strings, even if the user enters a number. Convert them on the client or server:

  // Server-side conversion example
  function processForm(formData) {
    const age = Number(formData.age);
    if (isNaN(age)) {
      throw new Error("Age must be a number!");
    }
    // Continue processing
  }
  

3. Pro tips for better form handling #

• Don't pass the raw form DOM object: Manually collect form data instead—it gives you more control over data types before sending:

  function lSubmit(formObj) {
    const x = $("#output");
    x.html('Wait until verified....');
    
    // Collect and sanitize data
    const formData = {
      username: $("#username").val().trim(),
      age: Number($("#age").val()),
      submissionTime: new Date().toISOString()
    };
  
    google.script.run
      .withSuccessHandler(res => x.html(res))
      .withFailureHandler(err => x.html(err.message))
      .processForm(formData);
  }
  

• Ensure your HTML is served via GAS: google.run only works if your HTML is loaded through GAS's HtmlService—it won't work if you open the HTML file locally. Your code.gs should have a doGet function like this:

  function doGet() {
    return HtmlService.createHtmlOutputFromFile('index'); // 'index' is your HTML file name
  }
  

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