javascript - Google Sheets 作为 Ajax 数据库

Question

我正在尝试遵循本指南:Google Sheets as a Database – INSERT with Apps Script using POST/GET methods (with ajax example)

我知道我必须将“Google Sheet/Apps 脚本代码”放入电子表格中。但我不知道我必须在 Google Apps 脚本的“code.gs”和“index.html”中放入什么。

因为 stackoverflow 示例带有“form.php”。

HTML

<form id="foo">
    <label for="bar">A bar</label>
    <input id="bar" name="bar" type="text" value="" />

    <input type="submit" value="Send" />
</form>

JavaScript

// Variable to hold request
var request;

// Bind to the submit event of our form
$("#foo").submit(function(event){

    // Abort any pending request
    if (request) {
        request.abort();
    }
    // setup some local variables
    var $form = $(this);

    // Let's select and cache all the fields
    var $inputs = $form.find("input, select, button, textarea");

    // Serialize the data in the form
    var serializedData = $form.serialize();

    // Let's disable the inputs for the duration of the Ajax request.
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    $inputs.prop("disabled", true);

    // Fire off the request to /form.php
    request = $.ajax({
        url: "/form.php",
        type: "post",
        data: serializedData
    });

    // Callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){
        // Log a message to the console
        console.log("Hooray, it worked!");
    });

    // Callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){
        // Log the error to the console
        console.error(
            "The following error occurred: "+
            textStatus, errorThrown
        );
    });

    // Callback handler that will be called regardless
    // if the request failed or succeeded
    request.always(function () {
        // Reenable the inputs
        $inputs.prop("disabled", false);
    });

    // Prevent default posting of form
    event.preventDefault();
});

form.php

// You can access the values posted by jQuery.ajax
// through the global variable $_POST, like this:
$bar = $_POST['bar'];

霍克西的改变

// fire off the request to /form.php
        request = $.ajax({
            url: "https://script.google.com/macros/s/AKfycbzV--xTooSkBLufMs4AnrCTdwZxVNtycTE4JNtaCze2UijXAg8/exec",
            type: "post",
            data: serializedData
        });

脚本的最后是创建一个表单并使用 ajax 通过 post 将数据发送到 Google 电子表格。

非常感谢。

Answer 1

试试这个......

代码.gs

var logSheetId = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX"; // Spreadsheet key

function doGet(e) 
{
  return HtmlService.createHtmlOutputFromFile('form.html');
}

function uploadData(formObject) 
{
  try 
  {
    var userEmail = formObject.name;
    var userMessa = formObject.message;
    var ss = SpreadsheetApp.openById(logSheetId);
    var sheet = ss.getSheets()[0];
    sheet.appendRow([userEmail,userMessa]);
  } 
  catch (error) 
  {
    return error.toString();
  }
}  

form.html

<div>
<form id="myForm">
  Name: <input type="text" name="name" placeholder="Your name..."/>
  Message: <textarea type="text" name="message" placeholder="message..."></textarea>
  <input type="button" value="Submit"
      onclick="google.script.run
          .withSuccessHandler(updateUrl)
          .withFailureHandler(onFailure)
          .uploadData(this.parentNode)" />
</form>

<div id="output"></div>

<script>
    function updateUrl() {
        var div = document.getElementById('output');
        div.innerHTML = '<a>Data sent!</a>';
    }
    function onFailure(error) {
        alert(error.message);
    }
</script>

<style>
  input { display:block; margin: 20px; }
</style>
</div>