How can I query a mysql database using jquery and ajax?

Question

I have a form with a "select" box. When the box is selected, I want the appropriate records from the database to be shown on the same page.

There are two files involved: an HTML page that contains the form:

<form id="theForm">
<select id="theDropdown">
<option value="biology">Biology</option>
<option value="chemistry">Chemistry</option>
<option value="english">English</option>
</select>
</form>
<div id="resultsGoHere"></div>

and also contains the jQuery code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $('#theDropdown').on('change', function() {
       var qString = '{sub: ' + $('#theDropdown option:selected').text() + '}';
       $.post('sub_db_handler.php', qString, processResponse);
       // $('#resultsGoHere').html(qString);
    });

    function processResponse(data) {
        $('#resultsGoHere').html(data);
    }

});
</script>

The jQuery code seems to successfully grab the selected value of the select menu and formats a JSON query string, which is printed out if the commented line above is uncommented.

Here is the PHP script that is referred to in the post command above.

<?php

$con = mysql_connect("localhost","rongilmo_ron","******");
if(!$con) { die('Could not connect: ' . mysql_error()); }
mysql_select_db("rongilmo_databases", $con);
$sub = $_POST['theDropdown'];

$q = "SELECT dbs.db_name, dbs.db_url FROM dbs, subjects, subjects_databases
WHERE subjects.subject_id=subjects_databases.subject_id
AND subjects_databases.database_id=dbs.db_id
AND subjects.subject_name='$sub'";

$r = mysql_query($q);
$array = mysql_fetch_row($r);
echo json_encode($array);

?>

I get no results at all. I've tested the query in non-ajax mode, so that isn't the problem.

Still new to ajax. I've been working on this for two days and can't seem to make it work, despite reading lots of tutorials and doing a lot of googling.

Any help you can offer will be greatly appreciated.

Answer 1

Give your select a name attribute.

<form id="theForm">
    <select id="theDropdown" name="theDropdown">
        <option value="biology">Biology</option>
        <option value="chemistry">Chemistry</option>
        <option value="english">English</option>
    </select>
</form>
<div id="resultsGoHere"></div>

Update. PHP is expecting a query string in the standard URL-encoded notation not JSON. By sending it the following way the $_POST array should contain 'sub' with the value of the selected option.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $('#theDropdown').change(function() {   
        var qString = 'sub=' +$(this).val();
        $.post('sub_db_handler.php', qString, processResponse);
    });

    function processResponse(data) {
        $('#resultsGoHere').html(data);
    }

});
</script>

<?php

    $con = mysql_connect("localhost","rongilmo_ron","******");
    if(!$con) { die('Could not connect: ' . mysql_error()); }
    mysql_select_db("rongilmo_databases", $con);
    $sub = $_POST['sub'];

    $q = "SELECT dbs.db_name, dbs.db_url FROM dbs, subjects, subjects_databases
    WHERE subjects.subject_id=subjects_databases.subject_id
    AND subjects_databases.database_id=dbs.db_id
    AND subjects.subject_name='$sub'";

    $r = mysql_query($q);
    $array = mysql_fetch_row($r);
    echo json_encode($array);

?>

Answer 2

You should use the ajax $.getJson() to return a json string. It will require you to use $each on the json string. See the jquery document on the website http://api.jquery.com/jQuery.getJSON/