web-dev-qa-db-fra.com

AJAX poster sur une feuille de calcul Google

J'essaie de publier des données de formulaire dans une feuille de calcul Google. Actuellement, si le formulaire est validé, les événements suivants se produisent:

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

J'ai utilisé le paramètre de réussite pour vérifier que mes données de formulaire sont correctement sérialisées (elles le sont) et qu'elles sont réussies. Cependant, ma feuille de calcul google n'est pas mise à jour (aucune donnée n'est en cours). J'ai utilisé l'exemple de code ici, en changeant doGet en doPost ( http://mashe.hawksey.info/2011/10/google-spreadsheets-as-a-database-insert-with-apps-script-form- postget-submit-method / ), et ont rendu la feuille de calcul google accessible au public (et modifiable par quiconque). J'ai suivi les instructions, copiant le code dans googledocs, puis exécutant le setUp deux fois (première fois demandé la permission, deuxième fois que je l'ai exécuté, je n'ai rien remarqué). Quelqu'un peut-il m'aider? J'ai l'impression d'être super proche.

jqueryajaxgoogle-apps-scriptgoogle-sheets
25
Stuart Nelson

D'accord, j'ai trouvé une solution. Après avoir été informé des problèmes inter-domaines AJAX issues, j'ai décidé d'aller de l'avant et de suivre jusqu'à un "t" la méthode utilisée par l'auteur de l'article à http: // mashe. hawksey.info/2011/10/google-spreadsheets-as-a-database-insert-with-apps-script-form-postget-submit-method/ .

Pour publier des données dans votre feuille de calcul Google, créez d'abord la feuille de calcul et changez le nom de la feuille (coin inférieur gauche) en DATA. Ensuite, ouvrez l'éditeur de script (Tools ==> Script Editor) dans votre feuille de calcul et collez le script de l'article. Remplacez "doGet (e)" par "doPost (e)". Exécutez le script setUp deux fois. La première fois, il demandera l'autorisation de s'exécuter (accordez-le), puis la deuxième fois que vous choisissez de l'exécuter, vous n'obtiendrez aucune indication contextuelle qu'il a exécuté (j'ai exécuté le mien dans l'éditeur, il a donc dit "running setUp" ci-dessus la zone de saisie du code, mais c'était tout). Après cela, sélectionnez "Publier" dans l'éditeur de script, puis sélectionnez "Publier en tant que service". Cochez la case d'option "Autoriser quiconque à invoquer ce service" et la case à cocher "Autoriser l'accès anonyme". Copiez l'URL (IMPORTANT!) Et cliquez sur "Activer le service". C'était la "partie difficile".

Dans votre formulaire HTML, chaque élément que vous soumettez doit avoir un attribut "nom" (par exemple) Ce nom est la façon dont les données sont envoyées - chaque entrée est attachée à son nom. Assurez-vous que pour chaque élément de données de formulaire que vous collectez, il a un nom et que ce nom est entré sous forme de colonne dans votre feuille de calcul (c'est ainsi qu'il mappe les données de votre formulaire à votre feuille de calcul). Pour votre formulaire, définissez la méthode à publier et l'action sur votre URL "Publier en tant que service" (que je vous ai dit de sauvegarder) comme ceci:

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

J'ai inclus un identifiant de formulaire afin que je puisse sélectionner le formulaire et l'envoyer avec jquery. Dans votre HTML, avant le formulaire ci-dessus, ajoutez votre iframe caché:

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

Définissez une sorte de validation de formulaire (pas nécessaire, mais si chaque champ n'est pas rempli, vous obtiendrez des données incomplètes dans votre feuille de calcul), et si elle est validée, appelez-la jquery .submit (). par exemple.:

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

Voilà donc ça. Bonne chance!

36
Stuart Nelson

Comme Google Apps Script possède désormais un ContentService qui peut renvoyer des réponses JSON, il est possible de faire des requêtes ajax sans utiliser l'iframe caché. En tant qu'auteur de l'article de la solution originale, j'ai j'ai publié une version mise à jour de cette technique qui inclut un exemple ajax

Les utilisateurs peuvent également envisager de passer à cette nouvelle version car elle utilise d'autres nouveaux services de script Google Apps, en particulier:

  • en utilisant LockService pour empêcher l'accès en écriture simultané; et
  • passage au nouveau PropertiesService pour stocker les données de script
13
mhawksey

Je vais vous montrer la FAÇON FACILE d'envoyer des données à une feuille de calcul Google sans AJAX ni Google Form, ni PHP ... juste Google SpreadSheet et HTML ou même Android.

  1. Créez une nouvelle feuille de calcul Google.
  2. Outils ouverts/éditeur de script

Vous avez juste besoin de deux fichiers dans l'éditeur un HTML et un Code.gs:

par exemple:

  1. Allez dans Fichier/nouveau nom HTML ce fichier = 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>

il y a 3 champs à envoyer: EMAIL, CEDULA, NOMBRE

  1. Dans le même ScriptEditor, allez dans le fichier de Code.gs et tapez:

    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());
}

où enlace est l'url de votre feuille de calcul

  1. Publiez en tant qu'application d'application et obtenez l'url de votre nouveau script. Vous pouvez maintenant utiliser cette URL en tant qu'incorporation dans votre application HTML ou Android. C'est tout. L'utilisateur sera invité à autoriser l'ouverture de ce script
3
user5807327