Ajax調用onSubmit不起作用

我有一個登錄表單。在做登錄之前，我想確保用戶名和密碼是真實的..我試圖用ajax實現這一點，但到目前爲止它不工作..Ajax調用onSubmit不起作用

在我的表單中我正在調用函數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我也有這樣的代碼：創建的DEBUG.TXT文件：

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

NEW。但只有當我使用Chrome。隨着Firefox不創建，所以我想在Firefox的AJAX不工作？

我的形式：

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

來源

2015-05-29 DJack

添加e.preventDefault（）;到功能第一行 – Babar

如果我這樣做，它立即進入action =「login.php」 – DJack

不使用輸入類型提交，使用輸入類型的按鈕，並觸發你的功能check_user on.click（）事件列表的jquery – Babar

您可以打開Chrome網絡調試，看看阿賈克斯被調用。

Debugging Asynchronous JavaScript with Chrome DevTools

同樣在下面的行，你可能需要一個斜槓的文件名前

url : "/check_user.php",

來源

2015-05-29 10:45:34 Filype

其實我有「Something/check_user.php」，但我試過「/Something/check_user.php」，還有「./Something/check_user.php」，仍然不能正常工作 – DJack

這是錯誤的

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

這將是

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

來源

2015-05-29 10:45:49 Saty

不是 - 它會是'data：{username：username，password：密碼}' –

@RobSchmuecker感謝您快速提取我的錯誤 – Saty

不，沒有數據：{用戶名：用戶名，密碼：密碼}不工作.. – DJack

這是錯誤的格式：

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

應該 data : {'username':username, 'password':password},

添加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>

來源

2015-05-29 10:47:24

我試過了，它立即轉到表單的行爲 - > login.php – DJack

你確定這個函數是在'onSubmit'上被調用的嗎？甚至t的形式？ –

是的，\t \t

您需要添加e.preventDefault()上你的表單行爲。

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

來源

2015-05-29 10:51:16 Nikko

你可以試試這個，告訴我會有什麼錯誤？如果有的話！

;(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'); 
    } 

    }; 

})();

來源

2015-05-29 11:00:23 mehany

我應該在哪裏得到錯誤，因爲我沒有得到任何。 – DJack

你嘗試過用異步：假，

來源

2015-05-29 12:50:50

請在問題的評論部分發表您的疑問/問題，而不是在答案部分。 – Makesh

Ajax調用onSubmit不起作用

回答

相關問題