通过fetch api实现原生javascript发送http请求
·
描述:
通过 fetch api 实现原生javascript发送http请求。
<script type="text/javascript">
/**
* 用于处理<select>元素的onchange事件。注意:change事件触发时,值已经改变了。
**/
function doChange(selectElement)
{
const index = selectElement.selectedIndex; //获取<select>内已被选中的<option>的索引
const selectedOption = selectElement.options[index]; //获取选中的选项
const value = selectedOption.value; //得到选中的选项值
console.log('准备发送请求,参数:', value);
//1、使用URLSearchParams构建请求参数
const params = new URLSearchParams();
params.append('txtFileFullPathName', value);
//2、发起 fetch 请求
fetch('${pageContext.request.contextPath}/AdminServlet/obtainTxtFileContent', {
method: 'POST',
/*
如果希望发送json格式的请求就必须加这两行
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ txtFileFullPathName: value })
*/
body: params
})
.then(function(response) {
//第一步处理:把服务器返回的数据解析成json格式
return response.json();
})
.then(function(data) {
//第二步处理:拿到解析好的数据,打印成功日志
console.log('请求成功:', data);
//TODO: 在这里处理返回的数据,例如联动更新另一个下拉框
document.getElementById('txtContentTextarea').value = data; //把数据设置到<textarea>上
});
}
</script>
<select name="txtFileFullPathName" size="5" onchange="doChange(this)">
<c:forEach var="txtDiskFile" items="${txtDiskFiles}">
<option value="${txtDiskFile.fullPathName}">${txtDiskFile.name}</option>
</c:forEach>
</select>
更多推荐
所有评论(0)