簡單阿賈克斯失敗

Question

一個簡單的小提琴，其中阿賈克斯失敗：

<form action="welcome_post.php" method="post" id="f"> 
Name: <input type="text" name="name"><br> 
<input type="submit"> 
</form> 
<script> 
    $(document).ready(function(){ 
     $("#f").submit(function(event) { 
      event.preventDefault(); 
      $.post("/tests/welcome_post.php",function(data){ 
       alert(data) 
      }); 
     }); 
    }); 
</script> 

和welcome_post.php響應

<?php echo $_POST["name"]; ?> 

如果我刪除event.preventDefault（）的代碼加載一個新的PHP頁面，工作，否則$ _POST變量沒有設置，並提示未定義的索引錯誤。如何讓它設置.post工作？

Answer 1

它不起作用，因爲您實際上不發送POST數據。

這應該工作：

jQuery('#f').submit(function(evt) { 
    evt.preventDefault(); 
    var data = jQuery(this).serialize(); 
    jQuery.post('your/url.php', data, function(result) { 
     console.log(result); 
    }); 
}); 

Answer 2

你是不是在你的請求發送任何數據。因爲它是ajax，所以你必須告訴它要使用哪些數據。它不會自動使用表單數據，你必須指定它：

$(document).ready(function(){ 
    $("#f").submit(function(event) {   
    event.preventDefault(); 
    $.post(
    "/tests/welcome_post.php", 
    $(this).serialize(), //this will serialise the form data into the request 
    function(data){ 
     alert(data); 
    } 
    ); 
    }); 
}); 

的，你可以使用這種方法提交的參數完整列表，請參閱https://api.jquery.com/jquery.post/。

此外，您應該使用瀏覽器的開發工具的網絡選項卡來監視您的請求和響應的內容 - 這將幫助您瞭解這樣的問題的根本原因。