java web学习笔记：vue与jquery ajax混用

原创于 2021-05-15 10:18:58 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

java web初学笔记专栏收录该内容

19 篇文章

订阅专栏

这篇博客展示了如何在Vue.js应用中管理页面状态，通过`active`和`status`数据属性跟踪进度，并利用`onSubmit`方法处理异步登录请求。当登录过程中的每个步骤完成时，状态会更新为'已完成'，揭示了前端框架在处理流程控制中的应用。

var app = new Vue({
        el:'#app',
        data:{
            active: 0,
            status:['进行中', '步骤 2', '步骤 3'],
            showPages: [true, false, false],
            security_code:''
        },
        methods:{
            onSubmit: function (){
                $.ajax({
                    url:'loginServlet',
                    type:"post",
                    data:"",
                    dataType:'text',
                    success: function(respond){
						var pos = app.$data.active;
                        if(pos < 2)
                            app.$data.status[pos+1] = '进行中';
                        pos = ++app.$data.active;
                        app.$data.status[pos-1] = '已完成';
                    },
                    error: function(message){
                        
                    }
                })
            })