How to Call Google Apps Script from Web Page

by

Look into using the GET parameters. https://stackoverflow.com/a/14736926/2048063.

Here’s a previous question on the topic.

You can access the parameters passed by GET in your doGet(e) function using e.parameter. If you call http://script.google......./exec?method=doSomething, then

function doGet(e) {
  Logger.log(e.parameter.method);
}

doSomething will be written to the log, in this case.

Returning data from the script can be done using the ContentService, which allows you to serve JSON (I recommend). JSON is easiest (in my opinion) to make on the GAS end, as well as use on the client end.

The initial “populate list” call would look something like this. I will write it in jQuery because I feel that is very clean.

var SCRIPT_URL = "http://script.google.com/[....PUT YOUR SCRIPT URL HERE....]/exec";
$(document).ready(function() {
    $.getJSON(SCRIPT_URL+"?callback=?",
              {method:"populate_list"},
              function (data) { 
                alert(JSON.stringify(data)); 
              });
});

And the corresponding GAS that produces this.

function doGet(e) {
  if (e.parameter.method=="populate_list") {
    var v = {cat:true,dog:false,meow:[1,2,3,4,5,6,4]}; //could be any value that you want to return
    return ContentService.createTextOutput(e.parameter.callback + "(" + JSON.stringify(v) + ")")
        .setMimeType(ContentService.MimeType.JAVASCRIPT);
  }
}

This method is called JSONP, and it is supported by jQuery. jQuery recognizes it when you put the ?callback=? after your URL. It wraps your output in a callback function, which allows that function to be run on your site with the data as an argument. In this case, the callback function is the one defined in the line that reads function (data) {.

More Related Contents:

  1. Upload file to my google drive with Google Apps Script (NO FORM IN GOOGLE)
  2. Detecting Back Button/Hash Change in URL
  3. Jquery/Ajax call with timer
  4. jQuery: load txt file and insert into div
  5. How can I intercept XMLHttpRequests from a Greasemonkey script?
  6. CORS error on same domain?
  7. How to send data in request body with a GET when using jQuery $.ajax()
  8. How to send a message to a particular client with socket.io
  9. What does “return false;” do?
  10. How to trigger an onkeyup event that’s delayed until a user pauses their typing?
  11. Global Ajax error handler with AngularJS
  12. What’s to stop malicious code from spoofing the “Origin” header to exploit CORS?
  13. importing external javascript to google apps script [duplicate]
  14. Aborting jQuery().load()
  15. Phantomjs page.content isn’t retrieving the page content
  16. How to loop through Ajax Requests inside a JQuery When – Then statment?
  17. AJAX: Submitting a form without refreshing the page
  18. How to go about debugging JavaScript in the HtmlService in Google Scripts
  19. Solve Cross Origin Resource Sharing with Flask
  20. jQuery – How can I temporarily disable the onclick event listener after the event has been fired?
  21. Set anonymous/dynamic functions to Menu
  22. How to Detect Cross Origin (CORS) Error vs. Other Types of Errors for XMLHttpRequest() in Javascript
  23. What does “[Ljava.lang.Object;@” mean?
  24. Using Google Apps Script to scrape Dynamic Web Pages
  25. How to import JQuery into a Typescript file?
  26. Is there any size limitation for ajax post?
  27. Call Library function from html with google.script.run
  28. Dynamically changing navigation links (next and previous) in WordPress via AJAX
  29. How do I dynamically adjust css stylesheet based on browser width?
  30. Display Spreadsheet Data to HTML Table

Leave a Comment