vue展示AJAX数据（前后端分离）

最新推荐文章于 2024-04-02 04:04:01 发布

dongwhat

最新推荐文章于 2024-04-02 04:04:01 发布

阅读量314

点赞数

文章标签：前端 vue.js ajax html javascript

本文链接：https://blog.csdn.net/dongwhat/article/details/124330802

版权

本文介绍如何在Vue.js应用中利用AJAX获取数据，并将其动态显示在HTML页面上。通过关联Vue实例与特定DOM元素，使用AJAX请求获取服务器返回的result数据，然后将这些数据绑定到Vue实例的beans属性。在模板中，遍历beans数组以呈现每个bean的内容，实现前后端分离的数据展示。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<script>
    $(function(){
        var vue=new Vue({
            el: "#workingArea",
            data:{
                beans:[]
            }
        });
        var url="categories";
        $.ajax({
            url: url,
            success: function(result){
                console.log(result);
                vue.beans=result;
            }
        });
    });
</script>

<div id="workingArea" >
    <h1 class="label label-info" >分类管理</h1>
    <br>
    <br>
    <div class="listDataTableDiv">
        <table class="table table-striped table-bordered table-hover  table-condensed">
            <thead>
            <tr class="success">
                <th>ID</th>
                <th>图片</th&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dongwhat

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
vue展示AJAX数据（前后端分离）

<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><body><script> $(function(){ var vue=new Vue({ el: "#workingArea", data:{ beans:[] } }); va.
复制链接

扫一扫