JavaWeb——前端之Ajax&Vue

这篇文章距离上次修改已过192天，其中的内容可能已经有所变动。

在JavaWeb项目中，前端可以使用Ajax与Vue.js来实现更加动态和富交互的用户界面。以下是一个简单的例子，展示如何使用Ajax和Vue.js来从服务器获取数据并更新DOM。

创建一个简单的HTML页面，并引入Vue.js和Ajax库（通常使用jQuery或原生JavaScript的fetch API）。




<!DOCTYPE html>
<html>
<head>
    <title>Ajax & Vue Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="searchQuery" @keyup="fetchData">
        <ul>
            <li v-for="item in items">{{ item }}</li>
        </ul>
    </div>
 
    <script>
        new Vue({
            el: '#app',
            data: {
                searchQuery: '',
                items: []
            },
            methods: {
                fetchData: function() {
                    $.ajax({
                        url: 'YOUR_SERVER_ENDPOINT',
                        type: 'GET',
                        data: { query: this.searchQuery },
                        success: (data) => {
                            this.items = data;
                        },
                        error: (error) => {
                            console.error('Error fetching data: ', error);
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>

后端Servlet处理Ajax请求。




import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
 
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String query = request.getParameter("query");
        List<String> results = new ArrayList<>();
        // 模拟搜索数据库并返回结果
        results.add(query + " result 1");
        results.add(query + " result 2");
        // 设置响应内容类型
        response.setContentType("application/json");
        // 将结果写入响应
        response.getWriter().write(results.toString());
    }
}

在这个例子中

JavaWeb——前端之Ajax&Vue

评论已关闭

推荐阅读