.
205 Apps Script Webform XMLHttpRequest
1) Create Project Script
Project name: 205
Script files:
1Util.gs
2TaskMan.gs
3Web.gs
home.html
2) Edit home.html
<html>
<head> <base target="_top"> </head> <body> <form id="formGetTest" name="formGetTest"> <input type="hidden" name="cmd" value="submitdata"> <h3>GET Test Form</h3> <p> <label for="name">Name:</label> <input name="name" type="text" value="" /> </p> <p> <label for="pid">Pid:</label> <input name="pid" type="text" value="" /> </p> <p> <label for="age">Age:</label> <input name="age" type="text" value="" /> </p> <p class="sendrequest resetaftersubmit"></p> <input type="submit" value="submit get request" /> </form> <hr/> <form id="formPostTest" name="formPostTest"> <input type="hidden" name="cmd" value="submitdata"> <h3>POST Test Form</h3> <p> <label for="name">Name:</label> <input name="name" type="text" value="" /> </p> <p> <label for="pid">Pid:</label> <input name="pid" type="text" value="" /> </p> <p> <label for="age">Age:</label> <input name="age" type="text" value="" /> </p> <p class="sendrequest resetaftersubmit"></p> <input type="submit" value="submit post request" /> </form> <hr/> <script> /*utility functions*/ function formToJson(form){var obj={};var elements=form.querySelectorAll("input, select, textarea");for(var i=0;i<elements.length;++i){var element=elements[i];var name=element.name;var value=element.value;if(name){obj[name]=value;}} return obj;} function jsonToUrlParameters(json){return Object.keys(json).map((i)=>i+'='+json[i]).join('&');} var url='https://script.google.com/macros/s/AKfycbxEzd7rdO6sUHaUDdlq21Cwi_GLOOuJ8Dj93lJK-G2G8NPKhNuy/exec?'; /*DOMContentLoaded*/ document.addEventListener( "DOMContentLoaded", function() { var formsCollection = document.getElementsByTagName("form"); for(var i=0;i<formsCollection.length;i++) { var theForm = formsCollection[i]; theForm.addEventListener( "submit", function( e ) { e.preventDefault(); /*prevent default submit */ if (theForm.id=="formGetTest"){ requestGetTest(this); /*GET Request*/ } if (theForm.id=="formPostTest"){ requestPostTest(this); /*POST Request*/ } }, false); /*addEventListener*/ }/*for*/ })/*DOMContentLoaded*/ /* uses GET Request*/ function requestGetTest(theForm){ var sendparameters=jsonToUrlParameters(formToJson(theForm)); resetForms(); elMessage=document.getElementById(theForm.id).getElementsByClassName("sendrequest")[0]; elMessage.innerHTML = "sending request to server..."; var xhr = new XMLHttpRequest(); xhr.open('GET', url+sendparameters, true); xhr.onload = function () { objResponse=JSON.parse(xhr.responseText) console.log(objResponse); elMessage.innerHTML =JSON.stringify(objResponse.content); }; xhr.send(); } /* uses POST Request*/ function requestPostTest(theForm){ var sendparameters=jsonToUrlParameters(formToJson(theForm)); resetForms(); elMessage=document.getElementById(theForm.id).getElementsByClassName("sendrequest")[0]; elMessage.innerHTML = "sending request to server..."; var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); //Send the proper header information along with the request xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() {//Call a function when the state changes. if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) { objResponse=JSON.parse(xhr.responseText) console.log(objResponse); elMessage.innerHTML =JSON.stringify(objResponse.content); } } xhr.send(sendparameters); } /*reset forms and form messages*/ function resetForms(){ document.querySelectorAll('form').forEach(function(form) { form.reset(); }); document.querySelectorAll('.resetaftersubmit').forEach(function(p) { p.innerHTML=""; }); } </script> </body> </html> |
3) Edit Util.gs
/*getHTML*/
function getHTML(file) {
if (!file) {
var outputHtml = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
outputHtml.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
outputHtml.addMetaTag('viewport', 'width=device-width, initial-scale=1');
return outputHtml;
};
var outputHtmlFile = HtmlService.createHtmlOutputFromFile(file); /*need to create html file*/
outputHtmlFile.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
outputHtmlFile.addMetaTag('viewport', 'width=device-width, initial-scale=1');
return outputHtmlFile;
}
/*createHTML*/
function createHTML(htmlcodes) {
if (!htmlcodes) {
var outputHtml = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
outputHtml.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
outputHtml.addMetaTag('viewport', 'width=device-width, initial-scale=1');
return outputHtml;
};
var outputHtml = HtmlService.createHtmlOutput(htmlcodes);
outputHtml.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
outputHtml.addMetaTag('viewport', 'width=device-width, initial-scale=1');
return outputHtml;
}
/*createJSON*/
function createJSON(data) {
if (!data) {
data = []
};
var outputJson = ContentService.createTextOutput(JSON.stringify({
"status": "success",
"content": data
})).setMimeType(ContentService.MimeType.JSON);
return outputJson;
}
|
4) Edit TaskMan.gs
/*taskManager*/
function taskMan(cmd, e) {
switch (cmd) {
case "gethome":
return getHTML('home.html')
break;
case "testhtml":
var htmlcodes;
if (!e.parameter.testcodes) {
htmlcodes = '<b>Hello, test!</b>';
} else {
htmlcodes = e.parameter.testcodes;
}
return createHTML(htmlcodes)
break;
case "submitdata":
var jsoncodes;
if (!e.parameter) {
jsoncodes = {
test: 'Hello, test'
};
} else {
jsoncodes = e.parameter;
}
return createJSON(jsoncodes)
break;
case "testscriptrun":
return "Test Script Run"
break;
}
}
|
5) Edit WebApp.gs
function doGet(e) {
return handleResponse(e);
}
function doPost(e) {
return handleResponse(e);
}
/* handle action request */
function handleResponse(e) {
var lock = LockService.getPublicLock();
lock.waitLock(30000); // wait 30 seconds before conceding defeat.
try {
//Logger.log(e)
var cmd = e.parameter.cmd;
if (cmd == "appsetup") {
return "appsetup"
//return taskMan("appsetup", e);
}
else if (cmd == "gethome") {
return taskMan("gethome",e);
}
else if (cmd == "testhtml") {
return taskMan("testhtml",e);
}
else if (cmd == "submitdata") {
return taskMan("submitdata",e)
}
else { /*default case*/
strOutput={"status": "success","content": "hello!"}
//Logger.log(JSON.stringify(strOutput))
return ContentService.createTextOutput(JSON.stringify(strOutput))
.setMimeType(ContentService.MimeType.JSON);
}
} catch (e) { /*if error return this*/
strOutput={"status": "error","content": e}
//Logger.log(JSON.stringify(strOutput))
return ContentService.createTextOutput(JSON.stringify(strOutput))
.setMimeType(ContentService.MimeType.JSON);
} finally { /*release lock*/
lock.releaseLock();
}
}
function testHandleResponse(){
var e0={} //invalid empty parameter
var e1={parameter:{}} //valid empty parameter
var e2={parameter:{cmd:"appsetup"}} //valid parameter
Logger.log(handleResponse(e2))
}
|
6) Publish and Test
URL:
201502
