Question

我希望有人能帮助我了解我在做什么，我正在尝试使用一个简单的jquery表单登录。当我单击提交时，表单将重定向到操作页面

我尝试寻找简单的jquery模板，但是我总是被重定向到操作页面。我使用了event.preventDefault（），但没有帮助

//HTML

 <div id ="login" class="container">
        <div class="md-5" id="loginContainer" style="margin-top:100px;content-alignment:center;">
          <form id="loginForm" class="form" action="mylogin.php" method="post" style="background: lightskyblue;margin: 5%;border: 2px;border-style: ridge;padding: 10%;">
            <label for="userName" >User Name</label>
            <input id="userName" type="text" name="userName" required=""><br><br>
            <label for="passWord">Password</label>
            <input id="passWord" type="password" name="passWord" required=""></br>
            <input type="submit" id="loginSubmit" value="Login">
          </form>
        <div id="upload-progress"><div class="progress-bar"></div></div> <!-- Progress bar added -->
        </div>

//script

$("#loginForm").submit(function(event){
  event.preventDefault(); //prevent default action 
    var userName=document.getElementById('userName');
    var password=document.getElementById('passWord');
    var form_data = {myformdatawithusernameandpassword}
}

    $.ajax({
        url : "mylogin.php",
        type: "post",
        data : form_data,
        contentType: false,
        processData:false,
        xhr: function(){
        //upload Progress
        var xhr = $.ajaxSettings.xhr();
        if (xhr.upload) {
            xhr.upload.addEventListener('progress', function(event) {
                var percent = 0;
                var position = event.loaded || event.position;
                var total = event.total;
                if (event.lengthComputable) {
                    percent = Math.ceil(position / total * 100);
                }
                //update progressbar
                $("#upload-progress .progress-bar").css("width", + percent +"%");
            }, true);
        }
        return xhr;
    }
    }).done(function(response){ //
        $("#mainDashboard").html(response);
    });
});

我应该获得响应而无需重定向甚至刷新页面

Answer 1

删除表单的动作，并将<input type="submit '>更改为简单按钮，因为Submit类型提交表单并执行表单标签中指定的动作。

Answer 2

将您的提交回调修改为按钮的click handler。

您的event.preventDefault（）应该会成功阻止表单操作。

如何修复不断重定向到操作页面的jquery ajax登录表单？

2 个答案: