vue.js与后台数据交互

浅浅的花香味﹌ 2022-06-01 06:47 270阅读 0赞

第一步：引入js库：

<script src="../js/common/vue.min.js"></script>
    <script src="../js/common/vue-resource.js"></script>

前端代码：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>vue example</title>
    <link rel="stylesheet" href="../my/style.css">
    <script src="../js/common/vue.min.js"></script>
    <script src="../js/common/vue-resource.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" @click="get()" value="点击" />
        </div>
    </body>
    <script> new Vue({ el : '#app', data : { }, methods:{ get:function(){ this.$http.get('/getData').then((response) => { console.log(response); alert(response.data); },function(){ alert('请求失败！'); }); } } }); </script>
    </html>

后端接口响应：

....
        @RequestMapping("/getData")
        @ResponseBody
        public String getDatas() {
            return "data";
        }
        ....

效果：  
![这里写图片描述][SouthEast]

[SouthEast]: /images/20220601/024029aa29f6427e9f9dea83b425cfc3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，270人围观）

还没有评论，来说两句吧...

相关阅读

相关 java页面后台数据交互(2)

接着上一篇的写，本篇记录的是从jsp页面传值到java后台的方法中，当后台获取到了页面上的值才可以进行新增和修改的相关操作。最为常见的就是表单提交，

末蓝、/ 2022年06月12日 04:36/ 0 赞/ 208 阅读

相关 java页面后台数据交互(1)

我们在开发的时候用的是jsp页面，后台采用的是SSM框架结构，前后台的数据交互频繁，不管是从数据库查询数据在jsp页面上显示，还是在页面填写信息保存到数据库中，都需

缺乏、安全感/ 2022年06月12日 04:29/ 0 赞/ 215 阅读

相关 vue.js与后台数据交互

第一步：引入js库： <script src="../js/common/vue.min.js"></script> <script src="../js/c

浅浅的花香味﹌/ 2022年06月01日 06:47/ 0 赞/ 271 阅读

相关 JQuery以及highchart与后台数据交互

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd"> <html debug=

川长思鸟来/ 2022年05月21日 01:55/ 0 赞/ 191 阅读

相关 JQuery以及highchart与后台数据交互

public String getDetailStatisticData(String city, String district, String ind

ゝ一纸荒年。/ 2022年05月21日 01:54/ 0 赞/ 231 阅读

相关 TP5中ajax与后台数据的交互

Ajax最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负

素颜马尾好姑娘i/ 2022年05月11日 00:54/ 0 赞/ 214 阅读

相关 MUI框架-09-MUI 与后台数据交互

MUI框架-09-MUI 与后台数据交互本篇介绍使用 art-template 和原生 MUI 的数据交互 mui.ajax 来实现我们大家都知道，想要数

ゝ一世哀愁。/ 2022年05月10日 06:58/ 0 赞/ 435 阅读

相关 Extjs 与后台交互方式

一、 var conn = new Ext.data.Connection(); conn.request(\{

﹏ヽ暗。殇╰゛Y/ 2022年03月26日 03:16/ 0 赞/ 291 阅读

相关 layui之数据表格--与后台交互获取数据

jsp或html <table></table> 1 js //用户列表 var tableIns = table.render(\{ elem: ‘\userL

小咪咪/ 2022年03月26日 02:16/ 0 赞/ 542 阅读

相关 Android——登陆后台数据接口交互IDEA

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

r囧r小猫/ 2021年07月25日 23:15/ 0 赞/ 407 阅读