ajax 执行两次解决方案

avatar 2018年04月13日11:39:29 6 5499 views
博主分享免费Java教学视频，B站账号：Java刘哥
通常我们在做表单的时候，为了能给用户返回数据，我们使用 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不执行。  
历史上的今天
四月
13日
  • 微信
  • 交流学习，有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享，问题解决，技术交流。群号：590480292
  • weinxin
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0