描述:

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

更多推荐