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

Question

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

我的问题：如何通过从自定义网页中接受一种语言列表作为HTTP请求，然后在Azure逻辑应用中对它们进行循环来实现？我的意思是，自Azure Logic apps are HTTP triggered起，自定义网页能否简单地直接向该端点发出请求？例如，当我们从自定义网页调用逻辑应用程序时，如何确保当用户提交表单时，我对逻辑应用程序URL进行POST，并在正文中传递如下内容：[C0 ]。

我不确定如何去做，但是我在这里创建了HTML：{ "lang": "yourSelectedLanguageCode" }。

https://jsfiddle.net/peterlearnings/puvoqhcz/5/

Answer 1

讨论了问题之后，看起来您需要将数据发送到

<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>

。这非常简单，因为您可以将所需的json形状的数据发送到该端点，所以不需要任何特殊的操作（例如遍历多个请求）。

这是为每种语言提交一个Web请求的示例。它使用Azure Logic HTTP endpoint访问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)