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

Question

I have seen many posts but still not able to figure out why this code is not working. I have a user_dashboard.html which contains the code:-

<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+"
Status:"+status);
        });
    });
});
</script>

The db_test2.php is a file present in the same folder and contains the code:-

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

The problem is that I am not getting any alert and no console logs are being generated.

Answer 1

You have a submit button, so by default after running your click handler, it will submit the form immediately. To prevent this, you can return false or e.preventDefault():

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