java 获取前端复选框内容,并传递给后端的 servlet,实现对数据的操作;并将得到的数组返还给前端页面
时间: 2023-06-13 19:02:46 浏览: 52
首先,在前端页面中,需要为复选框设置一个相同的 name 值,然后使用 JavaScript 获取选中的复选框的值,将其转换为数组并提交给后端 servlet。
HTML代码示例:
```
<form>
<label><input type="checkbox" name="fruit" value="apple"> Apple</label>
<label><input type="checkbox" name="fruit" value="banana"> Banana</label>
<label><input type="checkbox" name="fruit" value="orange"> Orange</label>
<button type="button" onclick="submitForm()">Submit</button>
</form>
```
JavaScript代码示例:
```
function submitForm() {
// 获取选中的复选框的值,转换为数组
var selectedFruits = Array.from(document.querySelectorAll('input[name="fruit"]:checked')).map(e => e.value);
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求方法和URL
xhr.open('POST', '/servletName');
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
// 发送请求
xhr.send(JSON.stringify(selectedFruits));
// 监听响应
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 获取响应数据
var responseData = xhr.responseText;
// 将响应数据转换为数组并显示在页面上
var responseArray = JSON.parse(responseData);
var output = responseArray.join(', ');
document.querySelector('#output').textContent = output;
}
};
}
```
在后端 servlet 中,使用 request.getParameterValues() 方法获取前端传递的数组,并进行相应的操作,然后将处理后的数组转换为字符串并返回给前端页面。
Java代码示例:
```
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 获取前端传递的数组
String[] selectedFruits = request.getParameterValues("fruit");
// 进行相应的操作
// ...
// 将处理后的数组转换为字符串并返回给前端页面
String responseString = Arrays.toString(selectedFruits);
response.setContentType("application/json");
PrintWriter out = response.getWriter();
out.print(responseString);
out.flush();
}
```