今天写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//取消异步执行
});