使用Ajax提交form表单不进入回调函数的Bug解决_submit回调函数没有触发-优快云博客

本文链接：https://blog.youkuaiyun.com/yuan__meng/article/details/97687812

本文介绍了在使用Ajax提交form表单时遇到的问题：控制器返回成功但回调函数未执行。问题出在form表单提交时会刷新页面，导致Ajax回调函数失效。解决方案是将提交按钮移出form标签，或者使用非submit按钮触发Ajax提交，以避免页面刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

情景再现

如题，今天博主在写项目时，需要使用Ajax提交form表单来更新数据，具体要求是：

点击修改按钮触发弹出一个包含form表单的弹出层（是不是弹出层与这个Bug其实没有关系）
修改信息后提交
告诉用户是否修改成功，并自动关闭弹出层

于是博主使用Ajax来提交form表单，在controller里判断是否修改成功，成功则返回1，失败则返回0，这个返回值继续传到Ajax的回调函数里的msg，使用if语句进行判断，若为1则alert修改成功继而关掉弹出层，刷新父页面；若为2则alert修改失败，关闭弹出层。
然而博主写好时却发现，controller中已经成功修改数据，这个返回值却始终无法传到Ajax的回调函数里，博主进一步调试在回调函数中写了alert也没生效。说明回调函数失效了

出错原因

Ajax绑定在form的提交按钮上
为什么这样写就会出错呢？我们来看一下成功修改数据时程序的执行过程：
从提交表单开始，点击submit按钮—>触发click事件—>ajax提交数据到后台---->后台更新数据成功返回1---->前端这时应该在回调函数中执行alert“修改成功”，接着关闭弹出层，实际情况却是一动不动，没有反应。
其实，form表单只要有提交动作就会刷新一次页面所以在最开始点击submit时已经刷新了一次页面，导致Ajax的回调函数找不到原页面回调函数此时失效，无法执行函数体中的语句。