jquery的ajax发送请求后前端不能实时更新

今天写html页面时遇到了jquery的ajax发送请求后前端不能实时更新的情况,写此博客记录一下,也希望能帮到遇到同样问题的同志。

问题如下:

在这里插入图片描述
在这里插入图片描述

我这里是要实现点赞的功能,点完赞会重新访问数据库,获取最新数据。

前端代码如下:

 function getLikeCount() {
        var data = {
            bId:0,
            time:new Date().getTime()
        }
        $.getJSON("/like/count",data,function (data) {
            if (data.code == 200){
                $("#likeCount").text(data.data.count);
                if (data.data.isLike == 1){
                    $("#likeCount").addClass("fontColor")
                }
            }else {
                // alert(data.message)
            }
        })
    }

    function clickLike() {
        var data = {
            bId:0
        }
        $.getJSON("/like/clickLike",data,function (data) {
            if (data.data.isLike == 0){
                $("#likeCount").removeClass("fontColor")
            }else{
                $("#likeCount").addClass("fontColor")
            }
        })
        getLikeCount();
    }
可以看到clickLike()方法里,获取数据方法getLikeCount()的执行顺序是在数据存储完毕之后执行的。

点击完点赞按钮,后台数据已经改变,但是页面的数据却和后台不同步
在这里插入图片描述

在这里插入图片描述

之所以出现这种情况,是因为两个方法是异步执行,也就是说方法1执行的同时,方法二也在执行,因此不能确定那个方法会先执行完毕,如果获取数据的方法在执行完毕之前,数据还未修改,那么就会出现前后端数据未同步的情况。

因此如果想要避免这种情况,就需要关闭ajax的异步执行。方法如下:

        $.ajaxSettings.async = false;//取消异步(如果不设置此参数,前后端数据会出现不同步现象)

或者这种:

$.ajax({
					type:"post",
					url:"",
					async:false//取消异步执行
					});

这样问题就解决了!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值