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

Question

我正在创建一个自定义网页，其中包含一个复选框列表，供用户选择他们想要翻译文本的语言。我遇到的问题是，如何存储用户选择的语言并将其作为我的 Azure 逻辑应用查询中的输入传递？

Answer 1

这可能取决于您的需求。然而，实现此目的的直接方法是利用默认的 HTML 资源，并尽可能少地使用 javascript:

HTML:

<form id="form-id">
  <ul>
    <li><label><input type="checkbox" name="language" value="english"> English</label></li>
    <li><label><input type="checkbox" name="language" value="spanish"> Spanish</label></li>
    <li><label><input type="checkbox" name="language" value="vietnamese"> Vietnamese</label></li>
    <li><label><input type="checkbox" name="language" value="somali"> Somali</label></li>
    <li><label><input type="checkbox" name="language" value="chinese"> Chinese</label></li>
    <li><label><input type="checkbox" name="language" value="amharic"> Amharic</label></li>
    <li><label><input type="checkbox" name="language" value="korean"> Korean</label></li>
    <li><label><input type="checkbox" name="language" value="russian"> Russian</label></li>
    <li><label><input type="checkbox" name="language" value="tagalog"> Tagalog</label></li>
    <li><label><input type="checkbox" name="language" value="arabic"> Arabic</label></li>
    <li><label><input type="checkbox" name="language" value="khmer"> Khmer</label></li>
    <li><label><input type="checkbox" name="language" value="thai"> Thai</label></li>
    <li><label><input type="checkbox" name="language" value="lao"> Lao</label></li>
    <li><label><input type="checkbox" name="language" value="japanese"> Japanese</label></li>
    <li><label><input type="checkbox" name="language" value="deutsch"> Deutsch</label></li>
  </ul>
  <button type="submit">Submit</button>
</form>

Javascript:

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

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

  const formData = new FormData(document.getElementById('form-id'));  
  const url = 'https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index'
  fetch(url, {
    method: 'POST',
    body: formData
  })
})

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

现在，只需在后端处理此问题即可。

此外，如果您需要收集数据并以自定义方式发送，您可以使用此函数来实现:

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

整个选定的数据将位于该数组内，您可以使用 .join() 等方法将它们连接到您的网址上。

编辑:

如果您需要使用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 '})

})

但我觉得你首先需要了解一些事情:

1. POST 和 GET 之间的区别；
2. 如何向服务器发送数据(使用fetch api、axios、xhr request等)并处理服务器的响应；
3. 了解 API 希望您发送哪个契约(Contract)

干杯，