如何设置用户点击数据提交到后端的按钮后显示一个正在加载的信息,当再次点击提交数据到后端的按钮后,第一次点击提交数据到后端的按钮的所绘画的echarts图消失,然后显示加载的提示,直到下一个echart图画出来
时间: 2023-06-03 09:07:05 浏览: 117
可以通过JavaScript来实现这个功能。首先,在用户点击“提交数据”按钮时,可以通过修改按钮的value属性来显示“正在加载”的提示信息。当再次点击此按钮时,可以通过清除前一个图形的容器中的内容来使其消失。可以使用如下代码来实现:
var btn = document.getElementById("submitBtn"); // 获取提交按钮
var chartContainer = document.getElementById("chartContainer"); // 获取图形容器
btn.onclick = function() {
// 显示加载提示信息
btn.value = "正在加载中...";
// 清空图形容器
while(chartContainer.firstChild) {
chartContainer.removeChild(chartContainer.firstChild);
}
// 绘制新的echarts图
// ...
}
当echarts图绘制完成后,再将按钮的value属性设置为默认值,如下所示:
// 绘制完echarts图后,隐藏加载提示信息
btn.value = "提交数据";
相关问题
在vue中如何实现点击编辑按钮他会显示后端所保存的数据
在Vue中,可以通过以下步骤来实现点击编辑按钮后显示后端保存的数据:
1. 在Vue的data中定义一个变量,用于保存后端保存的数据。
2. 在页面中显示数据的位置(比如一个表单),将对应的value值绑定到该变量。
3. 在点击编辑按钮时,发起一个ajax请求,请求后端保存的数据。
4. 在请求成功后,将返回的数据赋值给步骤1中定义的变量。
5. 此时,页面中绑定的值已经改变,会自动更新为后端保存的数据。
下面是一个简单的示例代码:
```html
<template>
<div>
<form>
<input v-model="name" />
<input v-model="age" />
<button @click="edit">编辑</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
age: ''
}
},
methods: {
edit() {
// 发起ajax请求,获取后端数据
axios.get('/api/user')
.then(res => {
// 将返回的数据赋值给data中的变量
this.name = res.data.name
this.age = res.data.age
})
}
}
}
</script>
```
其中,`axios`是一个常用的发起ajax请求的库,需要先安装并引入。在实际开发中,还需要考虑请求失败、加载中等情况的处理。
当button点击后将用户数据传递到new vue,new vue用于将数据传递给后端flask,然后后端返回图表放在一个指定的div中,在此点击按钮到返回图片的过程中,如何设置在这个指定的div中设置加载的效果
可以在指定的div上加上一个loading状态的动画或图标,来表示数据正在加载中。可以使用CSS或JS来实现这个效果。例如,可以使用CSS的animation属性或JS的setTimeout来控制动画的开始和结束时间,以及显示loading动画的条件。在数据返回后,将loading动画或图标隐藏即可。