jQuery / php / mysql - 如何在不重新加载页面的情况下操作mysqli_query？

Question

I have a table containing data read from a MySQL database via PHP. The first column holds all item names. Now, on clicking a td element in the first column of the table would link to a page with more detailed information about the item contained in the td.

Now I came up with the following idea:

$(document).ready(function() {
    $('#table td:first-child').click(function() {
        $('div.main').animate({
            height: "50px"
        }, 600);
        setTimeout(function() {
            $('div.data').fadeIn(1000);
        }, 600);
    });
});

div.main is the div-container that has the table included. What I want to do now is to slide that container up and fade a new div-container in, right below it, the new container include()s a PHP page which holds a dynamic query (pseudocode, no string escaping, simplified version):

SELECT detail FROM items WHERE items.name = $_GET['name'];

What I couldn't figure out is if and how I can tell the PHP file that is included in the in-fading div-container which item name it has to grab details for, off the database.

Right now I can read the item name via JavaScript/jQuery, but I couldn't figure a way out to pass that value to the PHP file without having to reload the page.

Any ideas or suggestions welcome!

Answer 1

I think what you're looking for is asynchronous JavaScript and XML (AJAX). It sounds intimidating, but fortunately jQuery makes it very easy.

You can call $.ajax() directly, but for most cases, you can use one of the convenience wrappers. In this case, I think $.load() will meet your needs.

So, let's say your PHP file is called detail_ajax.php and it returns the HTML you wish to put in your div (with class data). All you would have to do then is this:

$('div.data').load( '/detail_ajax.php', function(data){
    $(this).html(data);
});

If you want to pass data TO detail_ajax.php, you can pass it along this way:

$('div.data').load( '/detail_ajax.php', { 'someField' : 'someValue' },
    function(data) {
        $(this).html(data);
    }
});

In detail_ajax.php, if you examine $_POST['someField'], you will see the value passed in.