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

Question

我正在嘗試構建一個 Web 應用程序，該應用程序可以從 Google 電子表格中的表單中記錄數據。 為此，我必須使用 JavaScript（JSON 或 AJAX 請求也可以），但我不能使用 Google Apps 腳本，因為我需要用戶繼續使用我的頁面而 GAS 不允許這樣做。

我不太精通 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 電子表格的示例？

Answer 1

一個簡單的電子表格包含網絡應用程序示例

$(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>

應用程序腳本：

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)

}

我的簡單電子表格：

好消息是，與開始之前相比，您現在可能更擅長使用 Google Chrome 調試器。

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

問題描述

1 個解決方案

解決方案1
5 已采納 2017-06-17 18:18:34

一個簡單的電子表格包含網絡應用程序示例

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

問題描述

1 個解決方案

解決方案1 5 已采納 2017-06-17 18:18:34

一個簡單的電子表格包含網絡應用程序示例

解決方案1
5 已采納 2017-06-17 18:18:34