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