使用JQuery/AJAX發送HTML表單數據作爲JSON到PHP使用JQuery/AJAX

當我點擊我的登錄按鈕時，它只是因爲某種原因重新加載頁面。它應該提醒從我的PHP頁面回聲的字符串。使用JQuery/AJAX發送HTML表單數據作爲JSON到PHP使用JQuery/AJAX

這是我的login.js代碼：

$(document).ready(function(){ 
    $('#login').click(function(){ 


     $('#msgLoginStatus').show(); 
     $('#msgLoginStatus').html("processing..."); 

     $.post('login.php',{username:"bob",password:"pass"}, function(data){ 
      alert(data); 
     }); 
    }); 

});

我的login.php：

<?php 
    echo "message"; 
?>

和我的形式：

  <form id="loginForm" action="" method="post"> 
      <fieldset id="body"> 
         <fieldset> 
          <label for="username">Username</label> 
          <input type="text" name="username" id="username" /> 
         </fieldset> 
         <fieldset> 
          <label for="password">Password</label> 
          <input type="password" name="password" id="password" /> 
         </fieldset> 
         <button id="login">login</button> 
         <label for="checkbox"><input type="checkbox" id="checkbox"  />Remember me</label> 
         <br /> 
         <p id="msgLoginStatus" style="display:none"></p> 
        </fieldset> 
        <span><a href="#">Forgot your password?</a></span> 
       </form>

有在瀏覽器控制檯沒有錯誤。我試過這也使用$ .ajax，它返回一個錯誤，我試圖把錯誤變量放入一個警報，但是當它提醒時，它是一個空字符串。任何人有一個想法什麼是錯的？

來源

2011-08-07 FinalFortune

您的登錄按鈕有一個模糊的行動 - 增加type="submit"這樣的：

<button id="login" type="submit">Login</button>

現在，如果你真的想執行JavaScript的明確的POST，調用e.preventDefault所以瀏覽器的自動「提交」行動將被抑制。

e.preventDefault(); 
$.post(...);

但是，讓表單提交自己可能會更好。要做到這一點指定表格的正確action="login.php"屬性：

<form id="loginForm" action="/login.php" method="post">

請登錄按鈕現有的「點擊」的處理程序，只是刪除了「.post的$」的一部分，讓瀏覽器處理過帳。你仍然會得到很好的「處理...」文本。

更妙的是，處理的形式，而不是按鈕上的「click」事件「提交」事件：

$('#loginForm').submit(function(e) { 
    $('#msgLoginStatus').show(); 
    $('#msgLoginStatus').html("processing..."); 
});

這樣，用戶無論使用提交表單，你會得到漂亮的更新按鈕或按下鍵盤上的「輸入」。

來源

2011-08-07 20:09:12 orip

嘗試：

$('#login').click(function(e){ 
    e.preventDefault(); 
    $('#msgLoginStatus').show(); 
    $('#msgLoginStatus').html("processing..."); 

    $.post('login.php',{username:"bob",password:"pass"}, function(data){ 
     alert(data); 
    }); 
});

阻止「正常」的發生提交（我拿這，就是爲什麼你沒有得到任何錯誤）。

見http://api.jquery.com/event.preventDefault/

來源

2011-08-07 20:00:55 karim79

哇，我簡直不敢相信這是它，一直在盯着這個相當長的一段時間了。感謝您的迅速回答。 – FinalFortune

@FinalFortune - 奧普的答案是優越的，我會建議應用他所建議的一切（尤其是關於綁定到表單的onsubmit方法的部分），當然，接受他的答案。 – karim79

（在處理程序和搶事件對象作爲e）添加e.preventDefault();到CLCK處理程序。

來源

2011-08-07 20:01:34

或者你可以只設置按鈕類型='按鈕'，而不是提交。這也將運行代碼

<button id="login" type="button">Login</button>

這樣您不必停止瀏覽器的事件

來源

2012-09-12 06:07:47 Gurria

使用JQuery/AJAX發送HTML表單數據作爲JSON到PHP使用JQuery/AJAX

回答

相關問題