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与您所在的文件位于同一目录中，请尝试输入整个网址

e.g。 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
});

JQuery Ajax调用PHP页面无法正常工作

3 个答案: