AJAX登录脚本不再工作了

Question

I coded a login script based on an AJAX request which also worked before, but somehow it stopped working although i did not change anything special in the code. I'm testing my website with XAMPP, but when i try to login with my credentials, (does not matter if they are correct or not), I get redirected to http://localhost:81/?username=admin&password=pass which is still not the correct URL which should be passed via POST

My HTML Login Code:

<div id="loginContainer">
<form>
 <table class="loginMenu">
          <tr>
           <td class="loginTextAlign">Username: </td>
           <td><input id="username" name="username" type="text" class="loginMenuTextBox"></td>
      </tr>
      <tr>
           <td class="loginTextAlign">Password: </td>
           <td><input id="password" name="password" type="password" class="loginMenuTextBox"></td>
      </tr>
      <tr>
            <td></td>       
           <td><input id="mLogin" style="width:150px;" value="Login" type="submit" class="loginBtn"></td>
      </tr>
 </table>
</form>
</div>

My JS File: (Embedded along with jQuery in the index.php file)

$(document).ready(function() {

    $('#enter').click(function () {
        $('#splash').fadeOut(1000);
    });

    $('#mLogin').click(function(){ 
    var username = $('#username'); 
    var password = $('#password'); 

    if(username.val() == ''){ 
        alert('Please enter a valid username before submitting!');
        return;
    }
    if(password.val() == ''){ 
        alert('Please enter a valid password before submitting!');
        return;
    }
    if(username.val() != '' && password.val() != ''){ 
        var UrlToPass = 'action=login&username='+username.val()+'&password='+password.val();
        $.ajax({ 
        type : 'POST',
        data : UrlToPass,
        url  : 'checklogin.php',
        success: function(response){ 
            if(response == 0){
                hhide($('#loginerror'));
            }
            else if(response == 1){
                window.location = 'comment.php';
            }
        }
        });
    }
    return;
});     

});

Thanks in advance for your help, if you need more infos just ask please ;)

Answer 1

Give your <form> an id and use .submit()

The reason for you being redirected to http://localhost:81/?username=admin&password=pass is because the form is submitting before jQuery can run the validation/ajax call.

If you add a submit event handler to the from it will allow you to run javascript/jQuery before the form is submitted, then you can stop the form posting preventDefault(); allowing you to send the client username/password via ajax.

If you use the source code below the form tag should have an ID of UserLogin

$('#UserLogin').submit(function(event){ 
//Stop form submitting
event.preventDefault();
var username = $('#username'); 
var password = $('#password'); 
if(username.val()==''){alert('Please enter a valid username before submitting!');
return;
}
if(password.val()==''){alert('Please enter a valid password before submitting!');
return;
}
    if(username.val() != '' && password.val() != ''){ 
    var UrlToPass = 'action=login&username='+username.val()+'&password='+password.val();
    $.ajax({ 
    type : 'POST',
    data : UrlToPass,
    url  : 'checklogin.php',
    success: function(response){ 
if(response == 0){
    hhide($('#loginerror'));
}else if(response == 1){
    window.location = 'comment.php';
}
    }
    });
    }
    return;
});

If you have any question please leave a comment below and I will get back to you as soon as possible.

I hope this helps. Happy coding!