jQuery Ajax調用PHP頁面不起作用

Question

我看過很多文章，但仍然無法弄清楚為什么這段代碼不起作用。 我有一個user_dashboard.html ，其中包含以下代碼：-

<script>
$(document).ready(function (e) {
    //e.preventDefault();

    $('#search_button').click( function() {
        $.get("db_test2.php", function(data, status) {
            console.log("Test Log");
            alert("Data:"+data+"\nStatus:"+status);
        });
    });
});
</script>

db_test2.php是存在於同一文件夾中的文件，並且包含以下代碼：

<?php
    echo "This is a db test";
?>

問題是我沒有收到任何警報，也沒有生成任何控制台日志。

Answer 1

只是為了確保，將console.log("clicked"); 確保該方法被調用

$('#search_button').click( function() {
    console.log("clicked"); // here
    $.get("db_test2.php", function(data, status) {
        console.log("Test Log");
        alert("Data:"+data+"\nStatus:"+status);
    });
});

編輯

在我的JSFiddle上工作正常

如果db_test2.php與您所在的文件位於同一目錄中，請嘗試將整個URL

例如www.domain.co.uk/directory/db_test2.php

如果它有效，那么您知道找不到db_test2.php ，這就是您的問題所在。

另外，您的控制台中是否有任何錯誤？

Answer 2

我會在代碼的前面插入以下警報，以嘗試跟蹤問題：

<script>
   $(document).ready(function (e) {

      alert('#search_button').length);//to confirm the presence of the button

      $('#search_button').click( function() {

      alert('Button clicked!');

      $.get("db_test2.php", function(data, status) {
        console.log("Test Log");
        alert("Data:"+data+"\nStatus:"+status);
});
});
});
</script>

因此，除了您的“測試日志”之外，我還假設控制台上沒有其他Javascript錯誤？ 最后，再次確認您的“ db_test2.php”確實是您認為的樣子，“因為404錯誤通常會導致這種無聲的，令人沮喪的錯誤！

Answer 3

您有一個提交按鈕，因此默認情況下，運行點擊處理程序后，它將立即提交表單。 為防止這種情況，您可以return false或e.preventDefault() ：

$('#search_button').click( function() {
    $.get("db_test2.php", function(data, status) {
        console.log("Test Log");
        alert("Data:"+data+"\nStatus:"+status);
    });
    return false; // stop the form being submitted
});