На данном примере я хочу рассмотреть возможность передачи данных со стороны браузера в гугл скрипты. Например, необходимо собрать некие данные от пользователя:
Html код стандартный и будет выглядеть следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<title>Тестовый документ</title>
</head>
<body>
<div class="container mt-3">
<h4>Ваше имя:</h4>
<input type="text" class=" mb-3 form-control" id="someText" required>
<select class=" mb-3 form-select" id="selectGender">
<option selected>Выберите одно из:</option>
<option value="Man">Мужчина</option>
<option value="Woman">Женщина</option>
<option value="Unknown">Неведома зверушка</option>
</select>
<button id="send" type="button" class="mb-3 btn btn-outline-primary">Send</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous">
</script>
<script>
const button = document.getElementById("send")
const field = document.getElementById("someText")
const gender = document.getElementById("selectGender")
button.addEventListener("click", doStuff)
function doStuff(){
if (!field.value || gender.value =="Выберите одно из:"){
alert("не введен текст или не выбрано условие")
} else {
console.log(field.value)
google.script.run.doMoreStuff([field.value, gender.value])
field.value = ""
gender.value = "Выберите одно из:"
}
}
</script>
</body>
</html>Может показаться страшным, но это всего лишь подключенный bootstrap 5.2.2 с его css стилями и js скриптами.
Всё самое интересное происходит тут:
<script>
const button = document.getElementById("send")
const field = document.getElementById("someText")
const gender = document.getElementById("selectGender")
button.addEventListener("click", doStuff)
function doStuff(){
if (!field.value || gender.value =="Выберите одно из:"){
alert("не введен текст или не выбрано условие")
} else {
console.log(field.value)
field.value = ""
gender.value = "Выберите одно из:"
}
}
</script>
где
const button = document.getElementById("send") — получаю кнопку
const field = document.getElementById("someText")— получаю содержимое текстового поля
const gender = document.getElementById("selectGender")— получаю выбранный «пол»
button.addEventListener("click", doStuff) — завешиваю EventListener по нажатию кнопки.
Как только кнопка нажата, срабатывает функция doStuff()
function doStuff(){
if (!field.value || gender.value =="Выберите одно из:"){
alert("не введен текст или не выбрано условие")
} else {
console.log(field.value)
field.value = ""
gender.value = "Выберите одно из:"
}
}
</script>Функция проверяет заполненные поля и если они все заполнены, то выдает в console.log(field.value)
Проверяю:
Нажимаю на «Send» и «Вася» уходит в консоль лог:
Замечательно. Теперь осталось передать «Васю» и «Мужчина» непосредственно в скрипты.
Google.script.run
Чтобы передать с фронта на бэк, допишу в скрипт одну строчку:
google.script.run.doMoreStuff([field.value, gender.value])
по сути это запуск некой функции doMoreStuff([field.value, gender.value]) в которую через массив передаются значения текстового поля и поля с выбором
Итак, скрипт на фронте выглядит следующим образом:
<script>
const button = document.getElementById("send")
const field = document.getElementById("someText")
const gender = document.getElementById("selectGender")
button.addEventListener("click", doStuff)
function doStuff(){
if (!field.value || gender.value =="Выберите одно из:"){
alert("не введен текст или не выбрано условие")
} else {
console.log(field.value)
google.script.run.doMoreStuff([field.value, gender.value])
field.value = ""
gender.value = "Выберите одно из:"
}
}
</script>На стороне гугла же все выглядит следующим образом:
function doGet(){
return HtmlService.createHtmlOutputFromFile("index.html")
}
function doMoreStuff(something){
Logger.log(something)
}
Стандартная function doGet() который как раз и возвращает index.html — об этом писал ранее и нет смысла заново повторять.
И функция doMoreStuff(something), описанная на фронте, которая выводит в гугловый (здесь я специально указал именно логгер лог как сервис гугла) логгер лог то, что в нее пришло.
Итак, тестирую:
Нажимаю «Send» и у меня появляется передача данных:
Иду в лог на стороне скриптов и вижу массив:
Вот и всё. Далее с этими данными на стороне скриптов (back end) можно делать все что угодно. Например, завесить передачу данных в таблицу:
function doMoreStuff(something){
const ss = SpreadsheetApp.getActiveSpreadsheet()
const ws = ss.getSheetByName("Data")
ws.appendRow(something)
}
Только что передал «Васю» и «Василису» в таблицу, и сейчас буду передавать следующее:
Сейчас в таблице следующие записи:
Нажимаю «Send»:
Вижу, что «Конек-горбунок» передался, получаю в таблице запись:
