JavaWeb + Ajax + HTML 添加数据数据与查询数据，（利用axios响应与json数据传输）

以下是一个简化的示例，展示了如何使用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>元素中。

JavaWeb + Ajax + HTML 添加数据数据与查询数据，（利用axios响应与json数据传输）

评论已关闭

推荐阅读