Javaweb基础 Vue Ajax

作者：System 时间：2024年08月07日分类：所有,ajax 字数：1614

问题描述不是很清晰，但我猜你可能想要的是如何在Java Web应用程序中使用Vue.js和Ajax进行前后端交互的示例。

后端（Java）:




@RestController
public class DataController {
 
    @GetMapping("/data")
    public ResponseEntity<String> getData() {
        // 假设这是从数据库获取的数据
        String data = "Hello, Vue!";
        return ResponseEntity.ok(data);
    }
}

前端（Vue.js）:




<!DOCTYPE html>
<html>
<head>
    <title>Vue Ajax Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
 
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Loading...'
            },
            created() {
                this.fetchData();
            },
            methods: {
                fetchData() {
                    $.ajax({
                        url: '/data',
                        type: 'GET',
                        success: (response) => {
                            this.message = response;
                        },
                        error: (xhr, status, error) => {
                            console.error("An error occurred:", status, error);
                            this.message = "Error fetching data";
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>

在这个例子中，我们使用了Vue.js来处理前端的逻辑，并通过jQuery的Ajax方法来从后端的Java控制器发送HTTP GET请求并获取数据。然后，我们更新Vue实例的数据属性message，这会自动更新DOM中的显示内容。

Javaweb基础 Vue Ajax

评论已关闭

推荐阅读