Как принять список языков в виде HTTP-запроса из формы HTML? - PullRequest
Новая
       28

Как принять список языков в виде HTTP-запроса из формы HTML?

0 голосов
/ 17 апреля 2020

Я создал простую пользовательскую веб-страницу, которая позволяет пользователю выбирать несколько языков по своему выбору.

Мой вопрос: как это можно реализовать, приняв список языков в виде HTTP-запроса с пользовательской веб-страницы, а затем добавив oop поверх них в приложении Azure logi c? Я имею в виду, что, поскольку [Azure приложения Logi c запускаются по протоколу HTTP] [1], может ли пользовательская веб-страница просто сделать запрос к этой конечной точке напрямую? Например, когда мы вызываем приложение logi c с пользовательской веб-страницы, как мы можем гарантировать, что когда пользователь отправляет форму, я создаю POST для URL-адреса приложения logi c и передаю в теле содержимое, которое как то так:

1 Ответ

0 голосов
/ 18 апреля 2020

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

Вот пример, который отправляет один веб-запрос для каждого языка. Он использует FormData для доступа к элементу <form />, а затем получает все значения language, делая запрос fetch со списком языков. Затем он записывает результат. Вы, вероятно, хотите сделать что-то другое, кроме регистрации результатов, но, надеюсь, это поможет вам начать. 

function fetchForLanguages(languages) {
  console.info('starting fetch for', languages)
  return fetch("https://reqres.in/api/users", { // this should be your azure provided endpoint instead
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      languages: languages
    })
  }).then(response => {
    if (!response.ok) {
      throw new Error(`Network response was not ok: ${response.status} ${response.statusText}`);
    }
    return response.json()
  })
}


function handleSubmit(event) {
  event.preventDefault()
  const data = new FormData(event.currentTarget)
  const languages = data.getAll('language')
  console.info('languages selected:', languages)
  fetchForLanguages(languages)
    .then((result) => console.log('got result:', result))
}

let form = document.getElementById('language-form')
form.addEventListener('submit', handleSubmit)
<form id="language-form">
  <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>
...