Question

我有一个登录表单。在登录之前我想确保用户名和密码都是真的。我试图用ajax实现这一点，但到目前为止它还没有工作..

在我的表单中我调用函数check_user onSubmit。这是我的代码。

编辑：

    function check_user(){

            var username = $('#username').val();
            var password = $('#password').val();

            if(username.length>1 && password.length>1){ 
                    jQuery.ajax({
                        type : "POST",
                        url : "Something/check_user_exists.php",
                        data : {'username':username, 'password':password},
                        cache : false,
                        success : function(response) {
                            if (response == 1) {
                            alert ('true'); 
                            return true;                    
                            } else {
                            alert('false'); //this happens and goes to login.php       
                            $('#username').css('border', '2px red solid');
                            document.getElementById("username").placeholder = "Wrong username or password";
                            $('#password').css('border', '2px red solid');
                            document.getElementById("password").placeholder = "Wrong username or password";                     
                            return false;                   
                            }
                        }
                    });     
            }else{
                //when this happens it stays on the page
                $('#username').css('border', '2px red solid');
                document.getElementById("username").placeholder = "Wrong username or password";
                $('#password').css('border', '2px red solid');
                document.getElementById("password").placeholder = "Wrong username or password";
                return false;   
            }
        }

在我的PHP文件中check_user_exists.php我也有这段代码：

$fp = fopen("debug.txt", "a") or die("Couldn't open log file for writing.");
        fwrite($fp, PHP_EOL ."inside");
        fflush($fp);
        fclose($fp);

新：创建了debug.txt文件。但只有当我使用Chrome时。由于没有创建Firefox，所以我猜在Firefox中ajax无法正常工作？

我的表格：

<form name="login_form" action="Something/login.php" method="post" onsubmit="return check_user(this);">

Answer 1

您可以打开chrome网络调试以查看是否正在调用ajax。

Debugging Asynchronous JavaScript with Chrome DevTools

同样在以下行中，您可能需要在文件名

之前使用斜杠

url : "/check_user.php",

Answer 2

这是错误的

 data : 'username=' + username +"&password=" + password,

这将是

data : {username:username,password:password},

Answer 3

这是错误的格式：

data : 'username=' + username +"&password=" + password,

它应该是 data : {'username':username, 'password':password},

在函数start的第一行添加e.preventDefault();

建议：在您的Chrome或其他浏览器中按F12，转到网络并查看ajax请求是否实际发生，如果是，那么您得到的响应是什么。

<强>编辑：

你忘了在函数参数中传递表单的引用，那是错误，下面是我的工作代码：

<script>
 function check_user(e){
 e.preventDefault();
 alert('yes');
        var username = $('#username').val();
        var password = $('#password').val();

        if(username.length>1 && password.length>1){
        e.preventDefault(); // I added this but still it is not working
        alert('alive'); // this is working          

                jQuery.ajax({
                    type : "POST",
                    url : "check_user.php",
                    data : 'username=' + username +"&password=" + password,
                    cache : false,
                    success : function(response) {
                        if (response == 1) {
                        return true;                    
                        } else {        
                        $('#username').css('border', '2px red solid');
                        document.getElementById("username").placeholder = "Wrong username or password";
                        $('#password').css('border', '2px red solid');
                        document.getElementById("password").placeholder = "Wrong username or password";                     
                        return false;                   
                        }
                    }
                });     
        }else{
//this is working
            $('#username').css('border', '2px red solid');
            document.getElementById("username").placeholder = "Wrong username or password";
            $('#password').css('border', '2px red solid');
            document.getElementById("password").placeholder = "Wrong username or password";
            return false;   
        }
    }

</script>

<body>
<form name="login" id="contactForm" action="Something/login.php" method="post" onSubmit="return check_user(this);">
<input type = "submit" value="submit" />
</form>
</body>

Answer 4

您需要在表单操作中添加e.preventDefault()。

$("#formID").on("submit", function(e){
    e.preventDefault();
    check_user();
});

Answer 5

你可以尝试一下，告诉我这是什么错误吗？如果有的话！

;(function(){

function check_user(){
    var username = $('#username').val();
    var password = $('#password').val();

    if(username != '' && password != ''){
         $.ajax({
              type : 'POST', // or the method 
              url: "check_user.php",
              data: $('form').serialize(),
              beforeSend: function( xhr ) {   
              },
              error: function(data){
                  //handle errors from server                                         
              },
              success : function(data){
                  //handle success data from server     
              }
            })
              .done(function( data ) {
                if ( console && console.log ) {
                   // handle anything else after Ajax finishes the request
                  //console.log( data );
                }
            }); 
    }else{
       // output validation error
       alert('please type username and password');
    }

  };

})();

Answer 6

你试过吗？ async：false，

Ajax调用onSubmit不起作用

6 个答案: