sourcecode

구글 스프레드시트에 AJAX 게시

copyscript 2023. 9. 6. 22:14
반응형

구글 스프레드시트에 AJAX 게시

양식 데이터를 구글 스프레드시트에 올리려고 합니다.현재 양식이 유효한 경우 다음과 같은 현상이 발생합니다.

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 to DoPost(http://mashe.hawksey.info/2011/10/google-spreadsheets-as-a-database-insert-with-apps-script-form-postget-submit-method/), 를 변경하고 Google 스프레드시트를 공개적으로 사용할 수 있도록 했습니다.지시에 따라 Google doc에 코드를 복사한 다음 setUp을 두 번 실행했습니다(처음에는 권한을 요청했지만 두 번째에는 실행했을 때는 아무 일도 발생하지 않았습니다).누가 나를 도와줄 수 있나요?정말 가까이 있는 것 같아요.

알겠습니다. 해결책을 생각해 냈습니다.크로스 도메인 AJAX 문제에 대해 들은 후, 저는 http://mashe.hawksey.info/2011/10/google-spreadsheets-as-a-database-insert-with-apps-script-form-postget-submit-method/ 의 기사 작성자가 사용한 방법을 "t"로 진행하기로 결정했습니다.

Google 스프레드시트에 데이터를 게시하려면 먼저 스프레드시트를 만들고 시트 이름(왼쪽 아래 모서리)을 DATA로 변경합니다.그런 다음 스프레드시트의 스크립트 편집기(Tools == > Script Editor)를 열고 기사의 스크립트를 붙여 넣습니다."doGet(e)"을 "doPost(e)"로 변경합니다.setUp 스크립트를 두 번 실행합니다.처음 실행 권한을 요청할 때(허용), 두 번째 실행을 선택하면 실행 중이라는 팝업 표시가 나타나지 않습니다(편집기에서 실행하여 코드 입력 영역 위에 "running setUp"이라고 표시되었지만 그게 전부였습니다).그런 다음 스크립트 편집기에서 "Publish"를 선택한 후 "Publish as Service"를 선택합니다."누구나 이 서비스를 호출할 수 있도록 허용" 라디오 단추와 "익명 액세스 허용" 확인란을 누릅니다.URL을 복사하고(IMPRATIONAL!) "Enable Service(서비스 활성화)"이것이 "어려운 부분"이었습니다.

HTML 양식에서 제출하는 각 요소에는 "이름" 속성이 있어야 합니다(예: ). 이 이름은 데이터가 전송되는 방식이며 각 항목은 이름에 첨부됩니다.수집하는 모든 양식 데이터에 대해 이름이 있고 해당 이름이 스프레드시트의 열로 입력되어 있는지 확인합니다(양식의 데이터를 스프레드시트에 매핑하는 방법).양식의 경우 게시할 메서드와 작업을 "Publish as Service" 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 {}

자, 여기까지입니다.행운을 빕니다.

Google Apps Script에는 JSON 응답을 반환할 수 있는 컨텐츠 서비스가 있기 때문에 숨겨진 iframe을 사용하지 않고 ax 요청을 할 수 있습니다.원래 솔루션의 기사 저자로서 저는 아약스 예제를 포함한 이 기술의 업데이트된 버전을 출판했습니다.

사용자는 다른 새로운 Google Apps Script Service, 특히 다음과 같은 새로운 Google Apps Script Service를 사용할 때 이 새로운 버전으로 전환하는 것을 고려해 볼 수 있습니다.

  • 동시 쓰기 액세스를 방지하기 위해 LockService를 사용합니다.
  • 속성으로 전환스크립트 데이터 저장 서비스

구글 폼이나 PHP 없이도 구글 스프레드시트에 데이터를 보낼 수 있는 쉬운 방법을 보여드리겠습니다.구글 스프레드시트와 HTML, 심지어 안드로이드까지.

  1. 새 Google 스프레드시트를 만듭니다.
  2. 도구/스크립트 편집기 열기

편집기에 HTML과 Code.gs 두 개의 파일만 있으면 됩니다.

예를 들어 다음과 같이 합니다.

  1. 파일/새 HTML 이름으로 이동 이 파일=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>
    

이메일, CEDULA, NOMBR 3개의 필드가 전송됩니다.

  1. 동일한 ScriptEditor에서 de 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());
    }
    

여기서 enclace는 스프레드시트의 URL입니다.

  1. Application App으로 게시하고 새 스크립트의 URL을 가져옵니다.이제 이 url을 HTML 어플리케이션이나 안드로이드 앱에 내장된 형태로 사용할 수 있습니다.바로 그겁니다.사용자에게 이 스크립트를 열 수 있는 권한을 요청합니다.

언급URL : https://stackoverflow.com/questions/10000020/ajax-post-to-google-spreadsheet

반응형