我如何异步显示SQL查询的结果(使用ajax)?

时间:2013-04-13 19:02:03

标签: php mysql jquery

我通过这个网站看起来非常努力,发现了类似的问题但却不理解答案。也许我需要更熟悉AJAX,但这是我的问题:

我有一个PHP页面(mymdb.php),用户提交信息(名字和姓氏)。我有一个页面获取mysql_query(_results.php)的结果。最后,我有一个JS页面(bacon.js),它意味着不同步地显示查询的结果(通过淡出一个div,并向下滑动它上面的结果)。

所以我想我需要以某种方式访问​​SQL查询的$ results,然后使用jquery.html(results)显示它们。如何从JS页面访问php变量$ results?

没有很多代码。以下是mymdb.php页面中用户提交信息的相关代码:          

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
    <script src="bacon.js" type="text/javascript"></script>
</head>

<body>
    <div class="main">
        <form method="post" action="mymdb.php" id="search_form">
            <fieldset id="search_box">
                Actor's first last name:
                <input name="first_name" type="text" size="12" id="fname" /> 
                <input name="last_name" type="text" size="12" id="lname" /> 
                <button type="submit" name="submitButton" id="submitButton">go</button>
            </fieldset>
        </form>

        <div id="everythingElse">
            <h1>The One Degree of Kevin Bacon</h1>
            <p>
                Type in an actor's name to see if he/she was ever in a movie with Kevin Bacon!
            </p>

            <p id="result_paragraph">

            </p>

            <div id="kevinBaconImg"><img src="http://www.images22.com/pics/04/kevin-bacon-blue-eyes.jpg" alt="Kevin Bacon"/></div>
        </div>
    </div>
</body>

这是进行SQL查询的_results.php页面:

<?php
    mysql_connect("localhost", "username", "password");
    mysql_select_db("imdb_small");

    //get all movies the actor is in
    $results1 = mysql_query("SELECT name, year 
        FROM movies m 
            JOIN roles r ON m.id = r.movie_id 
        JOIN actors a ON a.id = r.actor_id 
        WHERE a.first_name = $('#fname').val() AND a.last_name = $('#lname').val();"
    );
?>

这是JS代码:

$(document).ready(function() {

    $('#submitButton').click(function(e) {
        e.preventDefault();

        $.post('mymdb.php', $('#search_form').serialize(), function() {

            $('#result_paragraph').html('<?= $results1 ?>').slideDown(); //this should dislay the results from the query
            $('#kevinBaconImg').fadeOut(); //this image fades out once the user submits the first and last names of the actor

        });
    });
});   

1 个答案:

答案 0 :(得分:0)

使用您在回调函数中获得的数据

我对php知之甚少,但似乎你应该echo来自你的php

$.post('mymdb.php', $('#search_form').serialize(), function(result) {

            $('#result_paragraph').html(result).slideDown(); //this should dislay the results from the query
            $('#kevinBaconImg').fadeOut(); //this image fades out once the user submits the first and last names of the actor

   });