ajax 执行两次解决方案

通常我们在做表单的时候,为了能给用户返回数据,我们使用 ajax 提交数据,然后阻止 form 表单提交。但是,最近老是发现 ajax 提交了两次,很是奇怪。

如下例

HTML

  1. <form method="post" id="registerForm" onsubmit="return checkRegister();">
  2.            <input type="text" name="username">
  3.            <input type="password" name="password">
  4.            <input type="email" name="email">
  5.            <input type="submit" value="注册">
  6. </form>

 

JS

  1. function checkRegister() {
  2.     alert(1);
  3.     $.ajax({
  4.         url: _ctx + "/register",
  5.         type: 'POST',
  6.         data: $("#registerForm").serialize(),
  7.         beforeSend: function (request) {
  8.             request.setRequestHeader(header, token);
  9.         },
  10.         success: function (response) {
  11.             alert(response.success);
  12.             if (response.success) {
  13.                 layer.alert('注册成功', {icon: 1});
  14.             } else if (response.success == false) {
  15.                 layer.alert(response.message, {icon: 2});
  16.             }
  17.         },
  18.         error: function () {
  19.             layer.msg('注册失败');
  20.         }
  21.     });
  22.     return false;
  23. }

 

发现 alert(1); 执行了两次,ajax 也提交了两次。

 

解决办法如下

为了防止调用的地方增加而导致绑定的数量增加,使用 unbind 解除其他的绑定

HTML

  1. <form method="post" id="registerForm" >
  2.          <input type="text" name="username">
  3.          <input type="password" name="password">
  4.          <input type="email" name="email">
  5.          <input type="submit" value="注册">
  6. </form>

 

JS

  1. $("#registerForm").unbind('submit').bind('submit', function () {
  2.     alert(1);
  3.     $.ajax({
  4.         url: _ctx + "/register",
  5.         type: 'POST',
  6.         data: $("#registerForm").serialize(),
  7.         beforeSend: function (request) {
  8.             request.setRequestHeader(header, token);
  9.         },
  10.         success: function (response) {
  11.             alert(response.success);
  12.             if (response.success) {
  13.                 layer.alert('注册成功', {icon: 1});
  14.             } else if (response.success == false) {
  15.                 layer.alert(response.message, {icon: 2});
  16.             }
  17.         },
  18.         error: function () {
  19.             layer.msg('注册失败');
  20.         }
  21.     });
  22.     return false;
  23. });

 

更新

HTML

  1. <form method="post" id="registerForm" >
  2.            <input type="text" name="username">
  3.            <input type="password" name="password">
  4.            <input type="email" name="email">
  5.            <input type="submit" value="注册" id="submit">
  6. </form>

 

JS

  1. $(document).on('click', '#submit', function () {
  2.     alert(1);
  3.     $.ajax({
  4.         url: _ctx + "/account/profile",
  5.         type: 'POST',
  6.         data: $("#profileForm").serialize(),
  7.         async: false,
  8.         beforeSend: function (request) {
  9.             request.setRequestHeader(header, token);
  10.         },
  11.         success: function (response) {
  12.             if (response.success) {
  13.                 layer.alert('修改成功', {icon: 1});
  14.                 $(".tab-content").load(_ctx + "/account/profile .tab-pane");
  15.                 $(".navbar-custom-menu-wrapper").load(_ctx + "/account/profile .navbar-custom-menu");
  16.             } else if (response.success == false) {
  17.                 layer.alert(response.message, {icon: 2})
  18.             }
  19.         },
  20.         error: function () {
  21.             layer.alert('修改失败', {icon: 2});
  22.         }, complete: function () {
  23.         }
  24.     });
  25.     return false;
  26. });

其实这样就行了,不会执行执出现执行两次的情况。

 

补充一下

  1. $(document).on('click', '#submit', function () {
  2. }

这种方式被称为事件委托,避免页面局部刷新后,js节点绑定丢失而导致js不执行。

 

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
言曌

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: