在包含其他人提供的一些Ajax脚本后，我无法显示html表单。
我将Google表格用作数据库，并使用html表单显示基于会话用户电子邮件的信息。用户可以查看信息并在表单上进行任何更改。提交表单后，更改将在Google表格上进行。
我能够用用户的信息很好地填充html表单，我使用的代码如下：
GoogleScript
function doGet() {
var html = HtmlService.createTemplateFromFile('index').evaluate().setTitle('Web App').setSandboxMode(HtmlService.SandboxMode.NATIVE);
return html;
}
function getDirectory() {
var ss = SpreadsheetApp.getActiveSheet();
var directory = ObjApp.rangeToObjectsNoCamel(ss.getDataRange().getValues());
return directory;
}
function getCurrentUser() {
var userEmail = Session.getActiveUser().getEmail();
return userEmail;
}
HTML
<!DOCTYPE html>
<html>
<form id="directory-form">
<? var data = getDirectory(); ?>
<? var email = getCurrentUser(); ?>
<h1>
Update Your Experience
</h1>
<h3>
Your Email: <?= email ?>
</h3>
<? for (var i=0; i< data.length; i++) { ?>
<? if (email == data[i].emailAddress) { ?>
Name:
<input id="name" type="text" name="name" value="<?= data[i].name ?>" required>
<br>
<br>
Line of Service:
<select id="service" name="service">
<? if (data[i].service == "Mechanic") { ?> <option selected="selected" value="Mechanic">Mechanic</option> <? }else { ?> <option value="Mechanic">Mechanic</option> <? } ?>
<? if (data[i].service == "Aero") { ?> <option selected="selected" value="Aero">Aero</option> <? }else { ?> <option value="Aero">Aero</option> <? } ?>
<? if (data[i].service == "Marine") { ?> <option selected="selected" value="Marine">Marine</option> <? }else { ?> <option value="Marine">Marine</option> <? } ?>
</select>
<br>
<br>
Market:
<select id="market" name="market">
<? if (data[i].market == "Bay Area and Northwest") { ?> <option selected="selected" value="Bay Area and Northwest">Bay Area and Northwest</option> <? }else { ?> <option value="Bay Area and Northwest">Bay Area and Northwest</option> <? } ?>
<? if (data[i].market == "Central") { ?> <option selected="selected" value="Central">Central</option> <? }else { ?> <option value="Central">Central</option> <? } ?>
<? if (data[i].market == "Greater Texas") { ?> <option selected="selected" value="Greater Texas">Greater Texas</option> <? }else { ?> <option value="Greater Texas">Greater Texas</option> <? } ?>
<br>
<br>
Office:
<select id="office" name="office">
<? if (data[i].office == "Los Angeles") { ?> <option selected="selected" value="Los Angeles">Los Angeles</option> <? }else { ?> <option value="Los Angeles">Los Angeles</option> <? } ?>
<? if (data[i].office == "Louisville") { ?> <option selected="selected" value="Louisville">Louisville</option> <? }else { ?> <option value="Louisville">Louisville</option> <? } ?>
<? if (data[i].office == "McLean") { ?> <option selected="selected" value="McLean">McLean</option> <? }else { ?> <option value="McLean">McLean</option> <? } ?>
</select>
<br>
<br>
Sailor:
<? if (data[i].sailor == "Yes") { ?> <label for="sailor"><input id="sailor" type="radio" name="sailor" value="Yes" checked>Yes</label><label for="sailor"><input id="sailor" type="radio" name="sailor" value="No" >No</label>
<? }else { ?> <label for="sailor"><input id="sailor" type="radio" name="sailor" value="Yes" >Yes</label><label for="sailor"><input id="sailor" type="radio" name="sailor" value="No" checked>No</label> <? } ?>
<br>
<br>
Crew Man:
<? if (data[i].crewMan == "Yes") { ?> <label for="crewMan"><input id="crewMan" type="radio" name="crewMan" value="Yes" checked>Yes</label><label for="crewMan"><input id="crewMan" type="radio" name="crewMan" value="No">No</label>
<? }else { ?> <label for="crewMan"><input id="crewMan" type="radio" name="crewMan" value="Yes">Yes</label><label for="crewMan"><input id="crewMan" type="radio" name="crewMan" value="No" checked>No</label> <? } ?>
<br>
<br>
Instructor:
<? if (data[i].instructor == "Yes") { ?> <label for="instructor"><input id="instructor" type="radio" name="instructor" value="Yes" checked>Yes</label><label for="instructor"><input id="instructor" type="radio" name="instructor" value="No">No</label>
<? }else { ?> <label for="instructor"><input id="instructor" type="radio" name="instructor" value="Yes">Yes</label><label for="instructor"><input id="instructor" type="radio" name="instructor" value="No" checked>No</label> <? } ?>
<br>
<br>
Basic Training:
<? if (data[i].training == "Yes") { ?> <label for="training"><input id="training" type="radio" name="training" value="Yes" checked>Yes</label><label for="training"><input id="training" type="radio" name="training" value="No">No</label>
<? }else { ?> <label for="training"><input id="training" type="radio" name="training" value="Yes">Yes</label><label for="training"><input id="training" type="radio" name="training" value="No" checked>No</label> <? } ?>
<br>
<br>
Advanced Training:
<? if (data[i].advanced == "Yes") { ?> <label for="advanced"><input id="advanced" type="radio" name="advanced" value="Yes" checked>Yes</label><label for="advanced"><input id="advanced" type="radio" name="advanced" value="No">No</label>
<? }else { ?> <label for="advanced"><input id="advanced" type="radio" name="advanced" value="Yes">Yes</label><label for="advanced"><input id="advanced" type="radio" name="advanced" value="No" checked>No</label> <? } ?>
<br>
<br>
<?}else{
}
} ?>
<button type="submit" id="submit-form">Update</button>
</form>
此后，我想添加功能以将表单数据发送回Google表格，因此我使用了通过此链接提供的代码： https://medium.com/@dmccoy/how-to-submit-an-html-form-to-google-sheets-without-google-forms-b833952cc175
由于此代码使用了自己的doGet（）函数，因此我删除了呈现HTML页面的我自己的doGet（）。
以下是在Medium网站上实现脚本后的代码：
/* function doGet() {
var html = HtmlService.createTemplateFromFile('index').evaluate().setTitle('Web App').setSandboxMode(HtmlService.SandboxMode.NATIVE);
return html;
} */
function getDirectory() {
var ss = SpreadsheetApp.getActiveSheet();
var directory = ObjApp.rangeToObjectsNoCamel(ss.getDataRange().getValues());
return directory;
}
function getCurrentUser() {
var userEmail = Session.getActiveUser().getEmail();
return userEmail;
}
// original from: http://mashe.hawksey.info/2014/07/google-sheets-as-a-database-insert-with-apps-script-using-postget-methods-with-ajax-example/
// original gist: https://gist.github.com/willpatera/ee41ae374d3c9839c2d6
function doGet(e){
return handleResponse(e);
}
// Enter sheet name where data is to be written below
var SHEET_NAME = "directory";
var SCRIPT_PROP = PropertiesService.getScriptProperties(); // new property service
function handleResponse(e) {
// shortly after my original solution Google announced the LockService[1]
// this prevents concurrent access overwritting data
// [1] http://googleappsdeveloper.blogspot.co.uk/2011/10/concurrency-and-google-apps-script.html
// we want a public lock, one that locks for all invocations
var lock = LockService.getPublicLock();
lock.waitLock(30000); // wait 30 seconds before conceding defeat.
try {
// next set where we write the data - you could write to multiple/alternate destinations
var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
var sheet = doc.getSheetByName(SHEET_NAME);
// we'll assume header is in row 1 but you can override with header_row in GET/POST data
var headRow = e.parameter.header_row || 1;
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
var nextRow = sheet.getLastRow()+1; // get next row
var row = [];
// loop through the header columns
for (i in headers){
if (headers[i] == "Timestamp"){ // special case if you include a 'Timestamp' column
row.push(new Date());
} else { // else use header name to get data
row.push(e.parameter[headers[i]]);
}
}
// more efficient to set values as [][] array than individually
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
// return json success results
return ContentService
.createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))
.setMimeType(ContentService.MimeType.JSON);
} catch(e){
// if error return this
return ContentService
.createTextOutput(JSON.stringify({"result":"error", "error": e}))
.setMimeType(ContentService.MimeType.JSON);
} finally { //release lock
lock.releaseLock();
}
}
function setup() {
var doc = SpreadsheetApp.getActiveSpreadsheet();
SCRIPT_PROP.setProperty("key", doc.getId());
}
这是带有ajax的HTML：
<!DOCTYPE html>
<html>
<form id="directory-form">
<? var data = getDirectory(); ?>
<? var email = getCurrentUser(); ?>
<h1>
Update Your Experience
</h1>
<h3>
Your Email: <?= email ?>
</h3>
<? for (var i=0; i< data.length; i++) { ?>
<? if (email == data[i].emailAddress) { ?>
Name:
<input id="name" type="text" name="name" value="<?= data[i].name ?>" required>
<br>
<br>
Line of Service:
<select id="service" name="service">
<? if (data[i].service == "Mechanic") { ?> <option selected="selected" value="Mechanic">Mechanic</option> <? }else { ?> <option value="Mechanic">Mechanic</option> <? } ?>
<? if (data[i].service == "Aero") { ?> <option selected="selected" value="Aero">Aero</option> <? }else { ?> <option value="Aero">Aero</option> <? } ?>
<? if (data[i].service == "Marine") { ?> <option selected="selected" value="Marine">Marine</option> <? }else { ?> <option value="Marine">Marine</option> <? } ?>
</select>
<br>
<br>
Market:
<select id="market" name="market">
<? if (data[i].market == "Bay Area and Northwest") { ?> <option selected="selected" value="Bay Area and Northwest">Bay Area and Northwest</option> <? }else { ?> <option value="Bay Area and Northwest">Bay Area and Northwest</option> <? } ?>
<? if (data[i].market == "Central") { ?> <option selected="selected" value="Central">Central</option> <? }else { ?> <option value="Central">Central</option> <? } ?>
<? if (data[i].market == "Greater Texas") { ?> <option selected="selected" value="Greater Texas">Greater Texas</option> <? }else { ?> <option value="Greater Texas">Greater Texas</option> <? } ?>
<br>
<br>
Office:
<select id="office" name="office">
<? if (data[i].office == "Los Angeles") { ?> <option selected="selected" value="Los Angeles">Los Angeles</option> <? }else { ?> <option value="Los Angeles">Los Angeles</option> <? } ?>
<? if (data[i].office == "Louisville") { ?> <option selected="selected" value="Louisville">Louisville</option> <? }else { ?> <option value="Louisville">Louisville</option> <? } ?>
<? if (data[i].office == "McLean") { ?> <option selected="selected" value="McLean">McLean</option> <? }else { ?> <option value="McLean">McLean</option> <? } ?>
</select>
<br>
<br>
Sailor:
<? if (data[i].sailor == "Yes") { ?> <label for="sailor"><input id="sailor" type="radio" name="sailor" value="Yes" checked>Yes</label><label for="sailor"><input id="sailor" type="radio" name="sailor" value="No" >No</label>
<? }else { ?> <label for="sailor"><input id="sailor" type="radio" name="sailor" value="Yes" >Yes</label><label for="sailor"><input id="sailor" type="radio" name="sailor" value="No" checked>No</label> <? } ?>
<br>
<br>
Crew Man:
<? if (data[i].crewMan == "Yes") { ?> <label for="crewMan"><input id="crewMan" type="radio" name="crewMan" value="Yes" checked>Yes</label><label for="crewMan"><input id="crewMan" type="radio" name="crewMan" value="No">No</label>
<? }else { ?> <label for="crewMan"><input id="crewMan" type="radio" name="crewMan" value="Yes">Yes</label><label for="crewMan"><input id="crewMan" type="radio" name="crewMan" value="No" checked>No</label> <? } ?>
<br>
<br>
Instructor:
<? if (data[i].instructor == "Yes") { ?> <label for="instructor"><input id="instructor" type="radio" name="instructor" value="Yes" checked>Yes</label><label for="instructor"><input id="instructor" type="radio" name="instructor" value="No">No</label>
<? }else { ?> <label for="instructor"><input id="instructor" type="radio" name="instructor" value="Yes">Yes</label><label for="instructor"><input id="instructor" type="radio" name="instructor" value="No" checked>No</label> <? } ?>
<br>
<br>
Basic Training:
<? if (data[i].training == "Yes") { ?> <label for="training"><input id="training" type="radio" name="training" value="Yes" checked>Yes</label><label for="training"><input id="training" type="radio" name="training" value="No">No</label>
<? }else { ?> <label for="training"><input id="training" type="radio" name="training" value="Yes">Yes</label><label for="training"><input id="training" type="radio" name="training" value="No" checked>No</label> <? } ?>
<br>
<br>
Advanced Training:
<? if (data[i].advanced == "Yes") { ?> <label for="advanced"><input id="advanced" type="radio" name="advanced" value="Yes" checked>Yes</label><label for="advanced"><input id="advanced" type="radio" name="advanced" value="No">No</label>
<? }else { ?> <label for="advanced"><input id="advanced" type="radio" name="advanced" value="Yes">Yes</label><label for="advanced"><input id="advanced" type="radio" name="advanced" value="No" checked>No</label> <? } ?>
<br>
<br>
<?}else{
}
} ?>
<button type="submit" id="submit-form">Update</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
var $form = $('form#directory-form'),
url = 'https://script.google.com/macros/s/myAPPURL'
$('#submit-form').on('click', function(e) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
data: $form.serializeObject()
}).success(
// do something
);
})
</html>
当我运行该应用程序时，它不会显示html表单。它直接进入显示文本的页面：
{"result":"success","row":190}
该行是我的Google表格中的下一个空白行，这使我认为如果仅显示表单，那么一切都会正常运行。
该应用已设置为以用户（不是我）的身份执行，因为我需要用户的电子邮件地址来查找Google表格中的信息。我组织内的任何人都可以访问它。没有任何人可以选择，甚至是匿名的。
非常感谢您的帮助！