javascript - 在 javascript codeigniter php 中使用 ajax 成功函数获取数据时，如何禁用页面重新加载？

Question

我有一个注册表单，想检查注册用户是否会尝试再次注册以使用 ajax 函数显示一个警告窗口已经注册。

我使用过 codeigniter 框架。

我的功能工作正常，但当弹出警报并按下 ok 页面时会重新加载。我想禁用

我的表单代码:

<form class="modal-content" name="form2" action="<?= $this->config->base_url();?>home/register_user" method="post" onSubmit="return ValidateRegister()">
                                              <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                          </button>
                          <h4 class="modal-title">Create your account</h4>
                        </div>
                       <div class="page-content vertical-align-middle" style="display:block;">
      <div class="form-group has-error">
                    <label class="control-label" for="inputTokenfieldError-tokenfield"> <?php echo validation_errors();  ?></label>

                  </div>
        <div class="form-group form-material floating">
          <input type="text" class="form-control " id="inputName" name="username" value="<?php echo set_value('username'); ?>" autocomplete="off">
          <label class="floating-label">Username</label>
        </div>
        <div class="form-group form-material floating">
          <input type="email" class="form-control " id="my_email" name="email" value="<?php echo set_value('email'); ?>" autocomplete="off">
        <label class="floating-label">Email</label>
        </div>
        <div class="form-group form-material floating">
          <input type="password" class="form-control " id="inputPassword" name="password" autocomplete="off">
          <label class="floating-label">Password</label>
        </div>

 <div class="form-group">
        <button type="submit" class="btn btn-primary btn-block">Join Now - It's Free</button>
 </div>

      </form>

我的 javascript 函数:

function checkRegistrations() 
        {
            var email = $('#my_email').val();
            $.ajax({
                url: "<?= base_url() ?>home/checkRegistration",
                async: false,
                type: "POST",
                data: "email="+email,
                dataType: "html",
                success: function(data) {
                  //  alert(data);
                    if(data==1)
                    {

                    //event.preventDefault();
                    alert('Email already registered');
                    return false;
                    window.location.reload(false);
                    }
                    else{

                        return true;
                    }
                }
            })
        }

Answer 1

只需向提交按钮添加一个 id，例如 #submitbutton。

并使用jQuery的.prop()方法设置按钮的disabled属性。

$("#submitbutton").prop("disabled", true);

IMP: 只有当您在 ajax success 上保持相同的页面时，这才会起作用，但是如果您正在重新加载页面，那么您需要在 php 端检查此表单是否已在当前 $_SESSION 中提交。

因此在您的 php ajax 处理程序中，您可以按如下方式进行检查。

session_start();
if(!empty($_POST) && empty($_SESSION['post'])) {
    $_SESSION['post'] = true;
    ... do your code
    unset($_SESSION['post']);
}else{
// send the json encoded error message 
}

并且在 html 表单上添加一个名为 post 的 hidden input 并设置 value 为 1 或您认为合适的任何值，因此一旦提交表单，post 键将设置在 $_SESSION SuperGlobal 数组，如果同一表单由同一 用户提交两次，则 php 不会接受它。