以下是一个简化的示例，展示了如何使用Ajax（使用axios库）向服务器发送数据并查询数据，并在前端使用HTML显示结果。
Java后端代码 (Servlet):
@WebServlet("/data")
public class DataServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 接收JSON数据
String data = request.getReader().lines().collect(Collectors.joining(System.lineSeparator()));
// 处理数据...
// 响应成功状态
response.setStatus(HttpServletResponse.SC_OK);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 查询数据...
String result = "查询到的数据";
// 将数据转换为JSON响应
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(result);
}
}前端HTML和JavaScript代码:
<!DOCTYPE html>
<html>
<head>
<title>Ajax示例</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<h2>添加数据</h2>
<button id="addData">添加</button>
<h2>查询数据</h2>
<button id="fetchData">查询</button>
<div id="dataContainer"></div>
<script>
// 添加数据的函数
document.getElementById('addData').addEventListener('click', function() {
axios.post('/data', { /* 你的数据对象 */ })
.then(response => {
console.log('数据添加成功', response);
})
.catch(error => {
console.error('数据添加失败', error);
});
});
// 查询数据的函数
document.getElementById('fetchData').addEventListener('click', function() {
axios.get('/data')
.then(response => {
// 将JSON数据显示在页面上
document.getElementById('dataContainer').innerText = JSON.stringify(response.data);
})
.catch(error => {
console.error('数据查询失败', error);
});
});
</script>
</body>
</html>在这个例子中，我们使用了axios库来发送Ajax请求。点击"添加"按钮会向/data端点发送一个POST请求，并附带JSON格式的数据。点击"查询"按钮会向同一个端点发送一个GET请求，并在收到响应后将数据以字符串形式显示在页面的<div>元素中。