使用Ajax提交form表单不进入回调函数的Bug解决

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

情景再现

如题,今天博主在写项目时,需要使用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的回调函数找不到原页面回调函数此时失效,无法执行函数体中的语句。

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值