html 在页面加载时向Google Sheet发送URL参数

2cmtqfgy  于 2023-05-12  发布在  Go
关注(0)|答案(1)|浏览(113)

我正在寻找一种方法来发送URL参数到谷歌表,只要页面加载,
如果我有一个像https://example.com/test?param1=value&param2=another这样的URL
我怎样才能得到数据“值”和“另一个”添加到谷歌工作表加载?
我目前正在使用GitHub上发布的Form to Google Sheets Demo:
https://github.com/jamiewilson/form-to-google-sheets
我目前的代码是预填充的文本输入,但它需要用户按下提交,而不是我希望它都发生,而不需要任何行动的用户。
我该怎么做
我已经探索了许多在页面加载时自动提交表单的方法,但没有一种有效。
然而,这是最好的道路吗?
下面是我的代码,减去CSS。
我的HTML

<form name="submit-to-google-sheet">
    <input type="text" id="inputBoxParam1" name="Param1" placeholder="Param1"/>
    <br><br>
    <input type="text" id="inputBoxParam2" name="Param2" placeholder="Param2" />
    <br><br>
    <button type="submit">Confirm Details</button>
</form>

我的JavaScript

<script type="text/javascript">

// Prefill the input boxes from parameter values
function getURLParameter(e) {
  return decodeURI((new RegExp(e + "=(.+?)(&|$)").exec(location.search) || [, ""])[1]);
}

if (getURLParameter("Param1").includes("@")) {
  document.getElementById("inputBoxParam1").value = getURLParameter("Param1");
} 
else {
  console.log("No Param1 parameter found.");
}

if (getURLParameter("Param2")) {
  document.getElementById("inputBoxParam2").value = getURLParameter("Param2");
} 
else {
  console.log("No Param2 parameter found.");
}

// Code From GitHub
const scriptURL = 'https://script.google.com/macros/s/examplescript'
const form = document.forms['submit-to-google-sheet']

form.addEventListener("submit", e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
  .then(response => console.log('Success!', response))
  .catch(error => console.error('Error!', error.message))
})

</script>

我只是一个17岁的初学者,所以任何帮助将不胜感激:)

wdebmtf2

wdebmtf21#

我相信你的目标如下。

  • 您希望在打开带有包含查询参数的URL的HTML时,自动将查询参数的值提交到Web应用程序。

修改要点:

  • 我认为如果要将valueanother的查询参数作为键param1param2发送,则需要将https://example.com/test?param1=value¶m2=another修改为https://example.com/test?param1=value&param2=another。而且,在您的javascript中,似乎需要param1才能包含@。但是,在您的查询参数中,param1value。请小心点。
  • 在脚本中,似乎需要单击submit按钮。为了使用查询参数自动提交值,不需要使用按钮。
  • 在您的问题中,不包括Google Apps Script。在这个答案中,我准备了一个示例Google Apps脚本来实现您的目标。

修改脚本:

请将您的Web Apps URL设置为scriptURL。在此修改中,删除了按钮。

HTML和Javascript端:
<form name="submit-to-google-sheet">
    <input type="text" id="inputBoxParam1" name="Param1" placeholder="Param1"/>
    <br><br>
    <input type="text" id="inputBoxParam2" name="Param2" placeholder="Param2" />
    <br><br>
</form>

<script>
const queryParameters = Object.fromEntries(new URLSearchParams(window.location.search));

if (queryParameters["param1"].includes("@")) {
  document.getElementById("inputBoxParam1").value = queryParameters["param1"];
} else {
  console.log("No Param1 parameter found.");
}

if (queryParameters["param2"]) {
  document.getElementById("inputBoxParam2").value = queryParameters["param2"];
} else {
  console.log("No Param2 parameter found.");
}

const scriptURL = 'https://script.google.com/macros/s/###/exec'; // Please set your Web Apps URL.

const data = new FormData();
Object.entries(queryParameters).forEach(e => data.append(...e));
fetch(scriptURL, { method: 'POST', body: data})
  .then(response => console.log('Success!', response))
  .catch(error => console.error('Error!', error.message))
</script>
Google Apps脚本端:

在本例中,它假设GoogleApps Script项目是GoogleSpreadsheet的容器绑定脚本。请小心点。如果您的Google Apps Script项目是独立类型,请将getActiveSpreadsheet()修改为openById("###spreadsheetId###")

const doPost = e => {
  const sheetName = "Sheet1"; // Please set your sheet name.

  const { param1, param2 } = e.parameter;
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);
  sheet.appendRow([param1, param2]); // Or,if you want to add the date to the 1st column, please use sheet.appendRow([new Date(), param1, param2])
  return ContentService.createTextOutput("ok");
}

测试:

在这种情况下,请访问您的HTML URL,如https://example.com/test?param1=value@value&param2=another。这样,value@valueanother的值被附加到电子表格。

注意:

*当您修改Web Apps的Google Apps脚本时,请将部署修改为新版本。这样,修改后的脚本将反映在Web Apps中。请注意这一点

<script>
const scriptURL = 'https://script.google.com/macros/s/###/exec';

const queryParameters = [...new URLSearchParams(window.location.search).entries()];
const data = new FormData();
queryParameters.forEach(e => data.append(...e));
fetch(scriptURL, { method: 'POST', body: data})
  .then(response => console.log('Success!', response))
  .catch(error => console.error('Error!', error.message))
</script>

相关问题