使用HTML和JavaScript，如何存储用户的选择并将这些值作为输入参数传递？

我正在创建一个自定义网页，其中包含一个复选框列表，供用户选择翻译文本所需的语言。我遇到的问题是，如何存储用户选择的语言并将其作为输入传递到我的Azure Logic App query中？

这可能取决于您的需要。但是，一种直接的方法是利用默认的HTML资源，并尽可能少使用javascript：

HTML:

如果您尝试发送并检查浏览器控制台，您将看到它尝试正确发送：

现在，它只是在后端处理这个问题

此外，如果您需要收集以自定义方式发送的数据，您可以使用此功能来完成以下操作：

const checkedOptions = []
document.querySelectorAll('input[name="language"]').forEach(item => {
  if(item.checked) {
    checkedOptions.push(item.value)
  }
})

所有选定的数据都将在此数组中，您可以使用.join之类的方法将它们连接到url上

编辑：

如果需要使用GET方法发送数据，可以按照以下示例进行操作：

const form = document.getElementById('form-id')

form.addEventListener('submit', ev => {
  ev.preventDefault()

  const formData = new FormData(document.getElementById('form-id'));
  const languages = new URLSearchParams(formData).toString()
  const reTranslate = 'someValue'
  const anotherValue = 'anotherValue'
  const url = `https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?${languages}&reTranslate=${reTranslate}&anotherValue=${anotherValue}`

  console.log(url)
  // output: https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?language=khmer&language=lao&reTranslate=someValue&anotherValue=anotherValue
  fetch(url, { method: 'GET '})

})

但我觉得你需要先了解几件事：

POST与GET的区别； 如何使用fetchapi、axios、xhr请求等向服务器发送数据，并处理来自服务器的响应； 发现API希望您发送的合同

---

干杯，

您想如何在querystring中通过它？由逗号、数组分隔，任何内容都可以…？您可能需要针对每种语言提交多个请求，请查看API。您可以在提交之前将所选内容保存在localstorage或indexdb中。此外，正如@Mahato指出的，用户选择的一种语言需要多个请求，每个请求都需要。@Diogolesa喜欢将JSON发送到逻辑应用程序。获取HTML表单以发送JSON正文，类似这样：{language:english}@ShivashriganeshMahato我的意思是，我们可以不用API来完成吗？谢谢Diago。我会经历这一切。另外，我用我的逻辑应用程序的工作流程更新了上面的问题，给出了一个想法。我有一个快速的问题。为什么常量url的值被截断，它是不完整的。它的名称是api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/。我认为应该是api.videoindexer.ai{location}/Accounts/{accountId}/Videos/{videoId}/Index[？language][&重新传输][&includeseamingurls][&accessToken]。我错了吗？这取决于API的预期。如果它需要一个帖子，我的方法是正确的，你需要在body formData中填充所有这些数据。如果它期望得到，那么你所说的方式就是正确的。我用GET选项更新了这个示例。多亏了Diogo，API需要一个POST。由于logic应用程序是HTTP触发的，自定义网页可以直接向该端点发出请求。正确吗？

const checkedOptions = []
document.querySelectorAll('input[name="language"]').forEach(item => {
  if(item.checked) {
    checkedOptions.push(item.value)
  }
})

const form = document.getElementById('form-id')

form.addEventListener('submit', ev => {
  ev.preventDefault()

  const formData = new FormData(document.getElementById('form-id'));
  const languages = new URLSearchParams(formData).toString()
  const reTranslate = 'someValue'
  const anotherValue = 'anotherValue'
  const url = `https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?${languages}&reTranslate=${reTranslate}&anotherValue=${anotherValue}`

  console.log(url)
  // output: https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?language=khmer&language=lao&reTranslate=someValue&anotherValue=anotherValue
  fetch(url, { method: 'GET '})

})