web-dev-qa-db-ja.com

AJAX Googleスプレッドシートに投稿

Googleスプレッドシートにフォームデータを投稿しようとしています。現在、フォームが検証されると、次のようになります。

if (validateForm === true) {
        $.ajax({
            type: 'post',
            url: 'https://docs.google.com/spreadsheet/ccc?key=0AlwuDjMUxwhqdGp1WU1KQ0FoUGZpbFRuUDRzRkszc3c',
            data: $("#workPLZ").serialize(),
            success: alert($("#workPLZ").serialize())
        });
    }
    else {}

成功の設定を使用して、フォームデータが正しくシリアル化されている（実際にシリアル化されている）ことと、成功していることを確認しました。ただし、Googleスプレッドシートが更新されていません（データが送信されていません）。ここではサンプルコードを使用して、doGetをdoPostに変更しました（ http://mashe.hawksey.info/2011/10/google-spreadsheets-as-a-database-insert-with-apps-script-form- postget-submit-method / ）、そしてGoogleスプレッドシートを公開しました（誰でも編集できます）。手順に従ってコードをgoogledocsにコピーし、次にsetUpを2回実行しました（最初に許可を求められ、2回目に実行されたときには何も起こらないことに気づきませんでした）。誰か助けてもらえますか？私はとても親しいような気がします。

jqueryajaxgoogle-apps-scriptgoogle-sheets
25
Stuart Nelson

さて、私は解決策を思いつきました。クロスドメインAJAX問題の通知を受けた後、私は先に進み、記事の作成者が http：// mashe。 hawksey.info/2011/10/google-spreadsheets-as-a-database-insert-with-apps-script-form-postget-submit-method/ 。

Googleスプレッドシートにデータを投稿するには、まずスプレッドシートを作成し、シート名（左下隅）をDATAに変更します。次に、スプ​​レッドシートでスクリプトエディター（ツール==>スクリプトエディター）を開き、記事からスクリプトを貼り付けます。 「doGet（e）」を「doPost（e）」に変更します。 setUpスクリプトを2回実行します。最初に実行の許可を求める（許可する）場合、次に実行することを選択すると、実行したことを示すポップアップは表示されません（エディタで実行したため、上記の「running setUp」と表示されましたコード入力領域ですが、これですべてです。その後、スクリプトエディターで[発行]を選択し、[サービスとして発行]を選択します。 「このサービスの呼び出しを誰にでも許可する」ラジオボタンと「匿名アクセスを許可する」チェックボックスをクリックします。 URL（重要！）をコピーして、[サービスを有効にする]をクリックします。これが「難しい部分」でした。

HTMLフォームでは、送信する各要素に「name」属性（例:)が必要です。この名前はデータの送信方法です。各エントリはその名前に添付されます。収集するすべてのフォームデータに名前があり、その名前がスプレッドシートの列として入力されていることを確認します（フォームからスプレッドシートにデータをマッピングする方法です）。フォームの場合は、次のようにメソッドをpostに設定し、アクションを「サービスとして公開」URL（保存するように指示しました）に設定します。

<form id="formID" method="post" action="URL" target="hidden_iframe">

フォームを選択してjqueryで送信できるように、フォームIDを含めました。 HTMLで、上記のフォームの前に、非表示のiframeを追加します。

<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"></iframe>

ある種のフォーム検証を設定します（必須ではありませんが、すべてのフィールドに入力しないと、スプレッドシートに不完全なデータが表示されます）。検証された場合は、jquery .submit（）を呼び出します。例えば。：

    if (formValidation === true){
           $("#formID").submit();
    }
    else {}

それがそれです。幸運を！

36
Stuart Nelson

Google Apps ScriptにJSON応答を返すことができる ContentService が追加されたため、非表示のiframeを使用せずにajaxリクエストを行うことができます。元のソリューションの記事の著者として、私は ajaxの例を含むこの手法の更新バージョンを公開しました

特に次のような他の新しいGoogle Appsスクリプトサービスを利用しているため、ユーザーはこの新しいバージョンへの切り替えを検討することもできます。

  • LockService を使用して、同時書き込みアクセスを防止します。そして
  • 新しい PropertiesService に切り替えてスクリプトデータを保存する
13
mhawksey

AJAX GoogleフォームもPHPも使用せずにGoogle SpreadSheetにHTMLを送信したり、Androidを使用したりせずに、Google SpreadSheetにデータを送信する簡単な方法を紹介します。

  1. 新しいGoogleスプレッドシートを作成します。
  2. ツール/スクリプトエディターを開く

エディターにはHTMLとCode.gsの2つのファイルが必要です。

例として：

  1. File/new HTML name this file = Index.htmlに移動します。

    <!DOCTYPE html>
<html>
<head>
<base target="_top">

<script>
function Enviar(){

var txt1=document.getElementById("txt1").value;
var txt2=document.getElementById("txt2").value;
var txt3=document.getElementById("txt3").value;
google.script.run.doSomething(txt1,txt2,txt3);
}
</script>
</head>

<body>
Prueba de Envio de informacion<br>
<input type="text" value="EMAIL" name="txt1" id="txt1"><br>
<input type="text" value="CEDULA" name="txt2" id="txt2"><br>
<input type="text" value="NOMBRE" name="txt3" id="txt3"><BR>
<Button name="btn1" onClick="Enviar();">Enviar</button>
</body>

</html>

送信する3つのフィールドがあります：EMAIL、CEDULA、NOMBRE

  1. 同じScriptEditorで、Code.gsファイルに移動して次のように入力します。

    function doGet() {
return HtmlService.createHtmlOutputFromFile('Index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function doSomething(s1,s2,s3){

Logger.log('datos:'+s1+"  "+s2+"  "+s3);
var enlace="https://docs.google.com/spreadsheets/d/
1XuAXmUeGz2Ffr11R8YZNihLE_HSck9Hf_mRtFSXjWGw/edit";
var ss = SpreadsheetApp.getActiveSpreadsheet();
var ss = SpreadsheetApp.openByUrl(enlace);
var sheet = ss.getSheets()[0];
sheet.appendRow([s1, s2, s3]);
Logger.log(ss.getName());
}

enlaceはSpreadSheetのURLです

  1. アプリケーションアプリとして公開し、新しいスクリプトのURLを取得します。これで、このURLをHTMLアプリケーションまたはAndroid app。に埋め込むように使用できます。それだけです。ユーザーは、このスクリプトを開く許可を求められます
3
user5807327