如何使用jquery和ajax查詢mysql數據庫？

Question

我有一個帶有“選擇”框的表單。 選中此框后，我希望數據庫中的相應記錄顯示在同一頁面上。

涉及兩個文件：包含以下格式的HTML頁面：

<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>

並且還包含jQuery代碼：

<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>

jQuery代碼似乎已成功獲取選擇菜單的選定值，並格式化了JSON查詢字符串，如果上面的注釋行未注釋，則將其打印出來。

這是上面的post命令中引用的PHP腳本。

<?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);

?>

我完全沒有結果。 我已經在非ajax模式下測試了查詢，所以這不是問題。

對ajax仍然是新手。 盡管已經閱讀了很多教程並進行了大量的谷歌搜索，但我已經為此工作了兩天，而且似乎無法使其正常工作。

您能提供的任何幫助將不勝感激。

Answer 1

給您選擇一個名稱屬性。

<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>

更新。 PHP期望使用標准URL編碼表示法而不是JSON的查詢字符串。 通過以下方式發送它，$ _POST數組應包含帶有選定選項值的'sub'。

<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

您應該使用ajax $ .getJson（）返回json字符串。 它將要求您在json字符串上使用$ each。 請參閱網站http://api.jquery.com/jQuery.getJSON/上的jquery文檔。