Question

当我点击“登录”按钮或按电子邮件或密码输入时，会发生回发操作并刷新页面，但我不希望刷新页面。如您所见，我已将e.preventDefault()添加到我的代码中，并在代码末尾添加了return false;，但它仍然无效。

＆＃13;

$('#login-form').submit(function(e) {
    e.preventDefault();
    var form_data = $('#login-form').serialize();
    cms_loader(1);
    $.ajax({
        url: "{{ url('/auth') }}",
        type: 'POST',
        dataType: 'json',
        data: form_data,
    })
    .done(function(data) {
        cms_loader(0);
        console.log(data);
        if (data.result == 'true')
            window.location.href = "{{ url('/panel') }}";
        else
            toastr.error('Wrong email or password.', 'Error');
    });
    return false;      
});

＆＃13;

<form id="login-form" class="login-form" method="post" action="{{ url('/auth') }}" accept-charset="utf-8">
    <input type="hidden" name="op" value="login">
    <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">
    <h3 class="form-title font-green">{{ $page_title or Base::get_site_title() }}</h3>
    <div class="alert alert-danger display-hide">
        <button class="close" data-close="alert"></button>
        <span>Authentication</span>
    </div>
    <div class="form-group">
        <!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
        <label class="control-label visible-ie8 visible-ie9">Email</label>
        <input class="form-control form-control-solid placeholder-no-fix" type="email" autocomplete="off" placeholder="Email" name="email" id="txt_login_email" />
    </div>
    <div class="form-group">
        <label class="control-label visible-ie8 visible-ie9">Password</label>
        <input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" id="txt_login_password" />
    </div>
    <div class="form-actions">
        <input type="submit" class="btn green uppercase" id="btn_login" name="login" value="Login" />
        <a href="javascript:;" id="forget-password" class="forget-password">Forget Password</a>
    </div>
    <div class="create-account">
        <p>
            <a href="javascript:;" id="register-btn" class="uppercase">Register</a>
        </p>
    </div>
</form>

＆＃13;

Answer 1

将输入类型替换为

<input type="submit" class="btn green uppercase" id="btn_login" name="login" value="Login" />

到

<button type="button" class="btn green uppercase" id="btn_login" name="login">Login</button>

并避免来自＆＃34;输入＆＃34;按下键，您可以使用此代码：

<script type="text/javascript">
function stopRKey(evt) 
{ 
    var evt = (evt) ? evt : ((event) ? event : null); 
    var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
    if ((evt.keyCode == 13) && (node.type=="text"))  {return false;} 
} 

document.onkeypress = stopRKey;
</script>

Answer 2

更新（更改 - <input type="submit" />替换为type="button"）

只需停止默认表单提交并在登录按钮上调用ajax，如下：

$(function() {

  $('#login-form').submit(function(e) {
    e.preventDefault();
    return false;      
  }

  $("#btn_login").click(function() {
    var form_data = $('#login-form').serialize();
    cms_loader(1);
    $.ajax({
        url: "{{ url('/auth') }}",
        type: 'POST',
        dataType: 'json',
        data: form_data,
    })
    .done(function(data) {
        cms_loader(0);
        console.log(data);
        if (data.result == 'true')
            window.location.href = "{{ url('/panel') }}";
        else
            toastr.error('Wrong email or password.', 'Error');
    });
  });    

});

<form id="login-form" class="login-form" method="post" accept-charset="utf-8">
    <input type="hidden" name="op" value="login">
    <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">
    <h3 class="form-title font-green">{{ $page_title or Base::get_site_title() }}</h3>
    <div class="alert alert-danger display-hide">
        <button class="close" data-close="alert"></button>
        <span>Authentication</span>
    </div>
    <div class="form-group">
        <!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
        <label class="control-label visible-ie8 visible-ie9">Email</label>
        <input class="form-control form-control-solid placeholder-no-fix" type="email" autocomplete="off" placeholder="Email" name="email" id="txt_login_email" />
    </div>
    <div class="form-group">
        <label class="control-label visible-ie8 visible-ie9">Password</label>
        <input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" id="txt_login_password" />
    </div>
    <div class="form-actions">
        <input type="button" class="btn green uppercase" id="btn_login" name="login" value="Login" />
        <a href="javascript:;" id="forget-password" class="forget-password">Forget Password</a>
    </div>
    <div class="create-account">
        <p>
            <a href="javascript:;" id="register-btn" class="uppercase">Register</a>
        </p>
    </div>
</form>

停止提交表单jquery ajax

2 个答案: