Используя HTML и JavaScript, как я могу сохранить выбор пользователя и передать эти значения в качестве входного параметра?

Question

Я создаю пользовательскую веб-страницу, которая содержит список флажков для пользователя, чтобы выбрать язык (языки), которые он хочет для перевода текста. У меня проблема в том, как я могу сохранить выбранные пользователем языки и передать их в качестве ввода в мой Azure Logi c запрос приложения?

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(), чтобы объединить их в своем 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 '})

})

Но я чувствую, что сначала вам нужно понять несколько вещей:

1. Разница между POST и GET;
2. Как отправить данные на сервер (используя fetch api, ax ios, запрос xhr и т. Д. c) и разобраться с ответом с сервера;
3. Узнайте, по какому контракту API ожидает от вас отправку

Cheers,