javascript - 前端：迁移数据时，点击提交后跳出迁移中动画，数据提交完成时，显示进度条到100%，请问如何实现-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 前端：迁移数据时，点击提交后跳出迁移中动画，数据提交完成时，显示进度条到100%，请问如何实现

怪我咯 2017-04-10 15:13:41

[JavaScript讨论组]

676

现在用的是jquery和bootstrap，想要实现点击提交后，开始跳出进度动画，同时发送后台数据，在数据发送完成时，动画进度条到达100%，请问如何实现？
以下是我自己写的代码，第一个是setTimeout的，但是这种自己感觉效果不好，感觉进度条是虚伪的，而且在数据提交时间不确定的情况下动画可能加载不完整
第二个是用ajax写的，不知道写的对不对，但是依然是做不到动画与提交数据同时进行，同时结束
版本1
代码链接1
版本2
代码链接2
我写在jsfiddle里面的代码运行好像还有点问题，本地调试时能够跳转，但jsfiddle里面不能跳转，动画也有点问题，不知哪位大神能指点下
同时还请问如何调试本地的ajax请求？

怪我咯

走同样的路，发现不同的人生

全部回复(3)

高洛峰2017-04-10 15:15:41 3楼

监听 progress 事件, 配合小的 CSS transition 来做:
https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XML...

赞 +0

添加回复

黄舟2017-04-10 15:15:41 2楼

本地测试的话，可以用【nginx、phpstudy、nodejs】等等
我觉得可以用用phpstudy，配合w3school上的php教程，可以做出来一点简单的东西
当然有兴趣直接从nodejs也好

赞 +0

添加回复

阿神2017-04-10 15:15:41 1楼

用Ajax的话可以

$.ajax({
    beforeSend: function(){
        // Handle the beforeSend event
    },
    complete: function(){
        // Handle the complete event
    }
})

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>