Question

所以我有这样的表格：

<form method="post" id="login-nav">
        <div class="form-group">
                <label class="sr-only" for="exampleInputEmail2">Email address</label>
                <input type="email" id="email" name="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
        </div>
        <div class="form-group">
                <label class="sr-only" for="exampleInputPassword2">Password</label>
                <input type="password" id="PassWord" name="PassWord" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
                <div class="help-block text-right"><a href="">Zaboravili ste password?</a></div>
        </div>
        <button id="submitit" onclick="GetUser();" class="btn btn-primary btn-block">Sign in</button>
        <div class="checkbox">
            <label>
                <input type="checkbox"> keep me logged-in
            </label>
        </div>
</form>

当我按下登录按钮时，我发送了一个帖子，我的HTML已经正确更新了一小段时间，然后页面重新加载。这不是我想要的。我不希望页面重新加载，但保持在我的ajax调用之后。这是javascript / jquery代码：

function GetUser() {
var email = $("#email").val();
var password = $("#PassWord").val();

$.post('../phpdatabase/getlogin.php',{ email: email , password : password }, function(data){
  $('#LogNav').html(data);
});
}

Answer 1

提交按钮的默认行为是提交表单，因此您必须阻止。

onclick="GetUser(event);"

这会将事件传递给函数回调。坚持你必须使用的功能：

function GetUser(e) {
    e.preventDefault();

我建议您将事件从按钮更改为表单submit事件：

$("#login-nav").on("submit", function(e) {
    var email = $("#email").val();
    var password = $("#PassWord").val();

    $.post('../phpdatabase/getlogin.php',{ email: email , password : password }, function(data){
      $('#LogNav').html(data);
    });

    e.preventDefault();
});

避免在HTML元素中使用内嵌事件，例如onclick，onfocus等......

Answer 2

添加<button type="button"></button>按钮的类型。因为默认情况下，如果它位于表单标记下，它将假定按钮类型提交。

<form method="post" id="login-nav">
    <div class="form-group">
            <label class="sr-only" for="exampleInputEmail2">Email address</label>
            <input type="email" id="email" name="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
    </div>
    <div class="form-group">
            <label class="sr-only" for="exampleInputPassword2">Password</label>
            <input type="password" id="PassWord" name="PassWord" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
            <div class="help-block text-right"><a href="">Zaboravili ste password?</a></div>
    </div>
    <button type="button" id="submitit" onclick="GetUser(e);" class="btn btn-primary btn-block">Sign in</button>
    <div class="checkbox">
        <label>
            <input type="checkbox"> keep me logged-in
        </label>
    </div>
</form>

你也可以通过将事件传递给函数并在javascript函数中阻止它来阻止它。像这样

function GetUser(e) {
    e.preventDefault();

为什么我的表单在ajax发布后发布？我该如何解决？

2 个答案: