如何接受来自 HTML 表单的语言列表作为 HTTP 请求？

Question

我创建了一个简单的自定义网页，允许用户 select 选择多种语言。

我的问题：如何通过接受来自自定义网页的语言列表作为 HTTP 请求，然后在 Azure 逻辑应用程序中遍历它们来实现这一点？我的意思是，由于 [Azure Logic 应用程序是 HTTP 触发的][1]，自定义网页是否可以直接向该端点发出请求？例如，当我们从自定义网页调用逻辑应用程序时，我们如何确保当用户提交表单时，我向逻辑应用程序URL创建一个POST并在正文中传递一个内容是这样的：

Answer 1

讨论完问题后，看来您需要的是将数据发送到 Azure Logic HTTP endpoint。这非常简单，因为您可以将数据以任何 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>

如何接受来自 HTML 表单的语言列表作为 HTTP 请求？

How to accept a list of languages as an HTTP request from a HTML form?

azure-functions-core-tools