我正在创建一个自定义网页,其中包含一个复选框列表,供用户选择他们想要翻译文本的语言。我遇到的问题是,如何存储用户选择的语言并将其作为我的 Azure 逻辑应用查询中的输入传递?
最佳答案
这可能取决于您的需求。然而,实现此目的的直接方法是利用默认的 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 '})
})
但我觉得你首先需要了解一些事情:
- POST 和 GET 之间的区别;
- 如何向服务器发送数据(使用fetch api、axios、xhr request等)并处理服务器的响应;
- 了解 API 希望您发送哪个契约(Contract)
干杯,
关于javascript - 使用 HTML 和 JavaScript,如何存储用户的选择并将这些值作为输入参数传递?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61240666/