我正在嘗試構建一個web應用程序，它可以從Google Spreadsheet中的窗體記錄數據。要做到這一點，我有使用JavaScript（JSON或AJAX請求將工作以及），但我不能使用Google Apps腳本，因爲我需要用戶繼續使用我的網頁和GAS不允許它。如何使用JavaScript將數據從HTML表單發送到Google Spreadsheet？

我不太懂JSON請求，但我試圖做一個追加：沒有意外，它沒有工作，也沒有意外，我不知道爲什麼。

我不確定我用來發出請求和代碼的URL是否正確，但不知道如何繼續，很難知道我的代碼中出了什麼問題。

這就是我的方式：

<form name="reqForm" id="reqForm" method="post" action="" accept-charset="UTF-8" enctype="application/json"> 
      <input type="hidden" name="area" id="area" readonly/> 
      <input type="hidden" name="idN" id="idN" readonly/> 
      <input type="hidden" name="dataReq" id="dataReq" readonly /> 
      <label for="nome">* Nome:</label> 
      <input type="text" id="nome" name="nome" placeholder="Il tuo nome" /> 
      <label for="cognome">* Cognome:</label> 
      <input type="text" id="cognome" name="cognome" placeholder="Il tuo cognome" /> 
      <label for="mat">* Matricola:</label> 
      <input type="text" id="mat" name="mat" placeholder="La tua matricola" /> 
      <label for="mail">* E-mail:</label> 
      <input type="text" id="mail" name="mail" placeholder="La tua e-mail" /> 
      <label for="testo">* Richiesta:</label> 
      <textarea id="testo" name="testo" placeholder="Che cosa vuoi chiedere?"></textarea> 
      <button type="button" value="Invia" onClick="check()">Invia</button> 
     </form>`

隱藏的值設置爲提供一個ID號和用戶的路徑。

的check()功能將檢查表格，（應該）做的請求，並正如我之前所說的GSpreadSheet

function check() { 

document.getElementById('errorForm').innerHTML = ""; 

var a = document.getElementById('area').value; 
var idN = document.getElementById('idN').value; 
var n = document.getElementById('nome').value; 
var c = document.getElementById('cognome').value; 
var m = document.getElementById('mat').value; 
var em= document.getElementById('mail').value; 
var t = document.getElementById('testo').value; 

// check the possible errors and set error messages. 
    // if msg is not empty, writes the messages in my page. 

} else if(msg == "") { 
    var xhr = new XMLHttpRequest(); 
    var key = mySheetKey, sName = mySheetName, url = "https://sheets.googleapis.com/v4/spreadsheets/"+key+"/values/"+ sName + ":append?valueInputOption=USER_ENTERED"; 

    xhr.open("POST", url, true); 
    xhr.setRequestHeader("Content-type", "application/json"); 
    xhr.onreadystatechange = function() { 
     if(xhr.readyState === 4 && xhr.status === 200) { 
      var json = JSON.parse(xhr.responseText); 
     } 
    // Here I should create the object made of my variables I read 
    // from my form at the beginning of the code and send the request that 
    // should append my datas to my Spreadsheet 

    xhr.send(); 
    } 
    }

寫，我的代碼看起來類似於若干個我在網上找到，但它沒有工作，我不知道如何理解錯誤。

您能不能請給我一些提示或建議或一些例子，可以幫助我將數據附加到Google電子表格？

來源

2017-06-17 Simone

爲什麼在EARTH上使用XMLHttpRequest AND $ .ajax - 這太愚蠢了。還有其他地方呢？ – mplungjan

遵循用於此目的的apis https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets.values/append –

@mplungjan我真的很抱歉...這對我來說是新的，我不熟悉AJAX或XMLHttpRequest ...請給我一些提示或任何可以幫助我的東西嗎？ – Simone

一個簡單的電子表格包含的Web應用程序例如

$(function() { 
     $('#btn1').click(validate); 
     $('#txt4').val(''); 
     $('#txt3').val(''); 
     $('#txt2').val(''); 
     $('#txt1').val('') 
     }); 
function validate() 
{ 
    var txt1 = document.getElementById('txt1').value || ' '; 
    var txt2 = document.getElementById('txt2').value || ' '; 
    var txt3 = document.getElementById('txt3').value || ' '; 
    var txt4 = document.getElementById('txt4').value || ' '; 
    var a = [txt1,txt2,txt3,txt4]; 
    if(txt1 && txt2 && txt3 && txt4) 
    { 
     google.script.run 
     .withSuccessHandler(setResponse) 
     .getData(a); 
     return true; 
    } 
    else 
    { 
     alert('All fields must be completed.'); 
    } 
}

整個例如：

的HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <base target="_top"> 
    </head> 
    <body> 
    <div id="data"> 
    <br />Text 1<input type="text" size="15" id="txt1" /> 
    <br />Text 2<input type="text" size="15" id="txt2" /> 
    <br />Text 3<input type="text" size="15" id="txt3" /> 
    <br />Text 4<input type="text" size="15" id="txt4" /> 
    <br /><input type="button" value="submit" id="btn1" /> 
    </div> 
    <div id="resp" style="display:none;"> 
    <h1>Response</h1> 
    <p>Your data has been received.</p> 
    </div> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script> 
     $(function() { 
     $('#btn1').click(validate); 
     $('#txt4').val(''); 
     $('#txt3').val(''); 
     $('#txt2').val(''); 
     $('#txt1').val('') 
     }); 

     function setResponse(a) 
     { 
     if(a) 
     { 
      $('#data').css('display','none'); 
      $('#resp').css('display','block'); 
     } 
     } 

     function validate() 
     { 
     var txt1 = document.getElementById('txt1').value || ' '; 
     var txt2 = document.getElementById('txt2').value || ' '; 
     var txt3 = document.getElementById('txt3').value || ' '; 
     var txt4 = document.getElementById('txt4').value || ' '; 
     var a = [txt1,txt2,txt3,txt4]; 
     if(txt1 && txt2 && txt3 && txt4) 
     { 
      google.script.run 
      .withSuccessHandler(setResponse) 
      .getData(a); 
      return true; 
     } 
     else 
     { 
      alert('All fields must be completed.'); 
     } 
     } 

     function loadTxt(from,to) 
     { 
      document.getElementById(to).value = document.getElementById(from).value; 
     } 

    console.log('My Code'); 
    </script> 
    </body> 
</html>

Google Apps腳本：

function getData(a) 
{ 
    var ts = Utilities.formatDate(new Date(), "GMT-6", "yyyy-MM-dd' 'HH:mm:ss"); 
    a.push(ts); 
    SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Login').appendRow(a); 
    return true; 
} 

function doGet() 
{ 
    var html = HtmlService.createHtmlOutputFromFile('index'); 
    return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL) 

}

我簡單的電子表格：

的好消息是，你可能在現在使用谷歌瀏覽器的調試器比你開始前好了很多。

來源

2017-06-17 18:18:34 Cooper

如果我錯了，請糾正我：您的代碼會將我的數據發送到在我的電子表格中寫入的Google應用程序腳本？ – Simone

函數getData（a）位於服務器上的gs文件中。此代碼來自一個簡單的網絡應用程序。它發送一組文本值。 – Cooper

是的，它會將數據從Web應用程序發送到綁定到我的電子表格的腳本，並且每次都會附加一行新數據。注意：整個html文件沒有被包括在內。確實，我沒有使用' Cooper

如何使用JavaScript將數據從HTML表單發送到Google Spreadsheet？

回答

一個簡單的電子表格包含的Web應用程序例如

相關問題