谷歌表與阿賈克斯

Question

數據庫我試圖按照本指南：Google Sheets as a Database – INSERT with Apps Script using POST/GET methods (with ajax example)

我知道，我已經把「谷歌板/ 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']; 

變化由Hawksey

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

劇本的結尾是讓一種形式，通過郵寄使用AJAX將數據發送到谷歌電子表格。

非常感謝。

Answer 1

試試這個....

Code.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> 

Answer 2

這是一個有效但已棄用的解決方案。它的工作原理，但我想用更新的功能。

var submissioSSKey = 'You Spreadsheet Key';//Change this key to your spreadsheet key 
function doGet(){ 
    var app = UiApp.createApplication().setTitle('myApp'); 
    var panel = app.createVerticalPanel(); 
    var grid = app.createGrid(4, 2).setId('myGrid'); 
    var nameLabel = app.createLabel('Name'); 
    var nameTextBox = app.createTextBox().setWidth('150px').setName('name'); 
    var messageLabel = app.createLabel('Message'); 
    var messageTextArea = app.createTextArea().setWidth('150px').setName('message'); 
    var submitButton = app.createButton('Submit'); 
    var infoLabel = app.createLabel('Data inserted in sheet successfully..') 
     .setVisible(false).setId('info'); 
    grid.setWidget(0, 0, nameLabel) 
    .setWidget(0, 1, nameTextBox) 
    .setWidget(1, 0, messageLabel) 
    .setWidget(1, 1, messageTextArea) 
    .setWidget(2, 1, submitButton) 
    .setWidget(3, 1, infoLabel); 
    var handler = app.createServerClickHandler('insertInSS'); 
    handler.addCallbackElement(panel); 
    submitButton.addClickHandler(handler); 
    panel.add(grid); 
    app.add(panel); 
    return app; 
} 

//Function to insert data in the sheet on clicking the submit button 
function insertInSS(e){ 
    var app = UiApp.getActiveApplication(); 
    var name = e.parameter.name; 
    var message = e.parameter.message; 
    app.getElementById('info').setVisible(true).setStyleAttribute('color','red'); 

    var sheet = SpreadsheetApp.openById(submissioSSKey).getActiveSheet(); 
    var lastRow = sheet.getLastRow(); 
    var targetRange = sheet.getRange(lastRow+1, 1, 1, 2).setValues([[name,message]]); 
    return app; 
} 

來源：Insert data in sheet using UI forms