Jquery的ajax始终进不了任何回调方法--原因发现

最新推荐文章于 2022-01-22 16:10:24 发布

原创最新推荐文章于 2022-01-22 16:10:24 发布 · 886 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax 无法调用 success

html 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种在使用Ajax进行异步数据交互时遇到的问题及其解决方案。具体来说，当在一个弹出对话框中调用Ajax请求并在请求完成后尝试关闭对话框时，可能会导致无法进入Ajax的success回调函数。文章详细解释了这一现象的原因，并提供了一个简单的解决办法。

场景：

使用某个日历控件的dialog（弹出框）来修改信息，点击确认后用jquery的ajax方法调用后台修改，在success方法用返回回来的状态码判断是否修改成功。

代码：

function update(id){
      .....
      updateCalendar(params);
      $(this).dialog('close');
      location.reload();
}
function updateCalendar(params){
$.ajax({
	type: 'POST',
	url: '${ctx}/calendar/calendarManageUpdate.action',
	data:'id='+params.id,
	dataType: 'json',
	success: function(data){
		 if(data.content != "success"){
			alert("您已经有了此日程！");
			return;
		}else{
			alert("修改成功");
		}
	}
});
}

结果：始终进不了success方法，我试过添加complete方法，也没有进去。搜索过类似问题，有说返回的数据必须是json格式字符串（如果指定了数据格式dataType: 'json'）,未果。

解决：ajax方法是在弹出框中定义的，但是ajax方法后调用了弹出框的关闭方法，使处理完后找不到dialog中的success方法,故将dialog的的关闭方法在success中调用：

function update(id){
      .....
      updateCalendar(params);
      
}
function updateCalendar(params){
$.ajax({
	type: 'POST',
	url: '${ctx}/calendar/calendarManageUpdate.action',
	data:'id='+params.id,
	dataType: 'json',
	success: function(data){
		 if(data.content != "success"){
			alert("您已经有了此日程！");
			return;
		}else{
			alert("修改成功");
			$(this).dialog('close');
			location.reload();
		}
	}
});
}

总结：ajax的回调方法需要在父类页面存在的情况下才能够调用, 虽然我对ajax添加了同步执行（async=true）参数，也未阻止窗口的关闭。