ajax设置定时请求第一次到页面没数据,第二次请求才有数据解决

最近在做页面的时候发现前端HTML页面通过ajax请求后台数据,设置了十五秒的定时请求,每次第一次到页面的时候都没有数据,然后等十五秒后就有数据刷新出来,那别人第一次访问就没数据,也太尴尬了。。。      然后问问度娘找到了解决办法,下面就写一个模板吧,以防忘记。

var ssc = function(){
$.ajax({
	url:'/xxx/xxx/xxx',    //请求地址
	dataType:'json',    //返回的数据类型
	type:'POST',    //请求的类型
	timeout:5000,    //请求超时时间
	//请求成功
	success:function(data,status){
		//里面写请求成功你要做的事情
        .........
	},
	//失败/超时
	error:function(XMLHttpRequest,textStatus,errorThrown){
		if(textStatus==='timeout'){
			alert('請求超時');
			setTimeout(function(){
				alert('重新请求');
			},2000);
		}
		//alert(errorThrown);
	}
});
return ssc;
}
setInterval(ssc(),15000);		//设置ajax 15秒请求一次数据

主要就是把ajax里面的外面套一层,然后加了一个return,后面调用的时候直接调用ssc()就行了。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为你介绍一下 Vue.js 实现这个功能的方法。 首先,你需要在第一个页面中定义一个表单,用户可以在表单中输入数据并点击“提交”按钮。在点击按钮时,我们需要使用 Vue.js 中的 AJAX 方法向服务器发送请求,获取数据。 在第二个页面中,你需要定义一个组件,用于渲染从服务器获取的数据。当第一个页面中的 AJAX 请求成功后,我们可以将获取到的数据传递给第二个页面的组件,然后组件可以将数据渲染到页面上。 下面是一个简单的示例代码,用于演示如何实现这个功能: 第一个页面: ```html <template> <div> <form @submit.prevent="submitForm"> <input v-model="inputValue" type="text"> <button type="submit">提交</button> </form> </div> </template> <script> export default { data() { return { inputValue: '' } }, methods: { submitForm() { // 使用 AJAX 方法向服务器发送请求 this.$http.post('/getData', { data: this.inputValue }).then(response => { // 请求成功后,将获取到的数据传递给第二个页面的组件 this.$emit('dataReceived', response.body) }) } } } </script> ``` 第二个页面: ```html <template> <div> <<my-component :data="receivedData"></my-component> </div> </template> <script> import MyComponent from './MyComponent.vue' export default { components: { MyComponent }, data() { return { receivedData: null } }, mounted() { // 监听第一个页面的事件,获取传递过来的数据 this.$on('dataReceived', data => { this.receivedData = data }) } } </script> ``` 以上代码只是一个简单的示例,实际应用中可能需要更加复杂的交互和数据处理逻辑。不过,这个示例可以帮助你理解如何使用 Vue.js 实现这个功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值