如何使用ajax根据两个下拉列表的值从数据库中检索数据？答案

【问题标题】：how to retrieve data from database based on the value of two drop down list using ajax?如何使用ajax根据两个下拉列表的值从数据库中检索数据？
【发布时间】：2013-10-17 18:11:07
【问题描述】：

我已经实现了Example。在这里，我只使用一个下拉列表检索数据。它工作正常。但是，如果我想对两个下拉列表执行相同的操作，则必须根据两个下拉列表的值来检索数据库中的值。我正在尝试如下： Ajax 脚本-

<script> // AJAX Implementation
function showCourses() {
    str = document.getElementById("branch").value;
    str1 = document.getElementById("sem").value;
    if (str == "" || str1 == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    }
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "listCourseByAjax.php?p=" + str + "&q=" + str1, true);
    xmlhttp.send();
}
</script>

下拉列表-

<select name="branch" onchange="showCourses(this.value)">
        <option id="branch" value="0" selected>Select one</option>
            <option id="branch" value="ISE">1/option>
            <option id="branch" value="CSE">2</option>
            <option id="branch" value="ME">3</option>
</select>
<select name="sem" onchange="showCourses(this.value)">
    <option id="sem" value="0" selected>select one</option>
    <option id="sem" value="I-P">I-P</option>
    <option id="sem" value="I-C">I-C</option>
    <option id="sem" value="II-P">II-P</option>
</select>

php文件-

$p = $_GET['p'];
$q = $_GET['q'];
$sql="SELECT * FROM course_details WHERE sem='" . $q . "' AND branch='" . $p . "'";
$result = mysql_query($sql);

echo "<table border='1'>
<tr>
    <th>Course Code</th>
    <th>Course Name</th>
    <th>Course Instructor</th>
    <th>Credit</th>
</tr>";

请帮我看看怎么做。

【问题讨论】：

请大家帮忙....
1 -.使用 Jquery 会让你的生活更轻松，以及 2-.使用准备语句。如果您需要更多帮助，您需要提供更多信息，还有示例，您可以使用 sqlfiddle 或 jsfiddle 来测试代码。

标签： javascript php mysql ajax jquery

【解决方案1】：

您如何引用 SELECT 元素的选定值，或者更准确地说，您的 SELECT 元素的结构存在问题。您需要将您的 ID（分支和 sem）放在 SELECT 而不是单个选项上，并且您可以在调用 showCourses() onchange 时删除 this.value 参数，因为您的函数未设置为接受参数。

尝试将其用于您的 SELECT

<select name="branch" id="branch" onchange="showCourses()">
  <option value="0" selected>Select one</option>
  <option value="ISE">1</option>
  <option value="CSE">2</option>
  <option value="ME">3</option>
</select>
<select name="sem" id="sem" onchange="showCourses()">
  <option value="0" selected>select one</option>
  <option value="I-P">I-P</option>
  <option value="I-C">I-C</option>
  <option value="II-P">II-P</option>
</select>

我还注意到，您对选定值的检查正在寻找 str 或 str1 的空字符串，但您的“选择一个”选项的值为 0，因此您可能需要更改：

if (str == "" || str1 == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
}

到

if (str == "0" || str1 == "0") {
    document.getElementById("txtHint").innerHTML = "";
    return;
}

【讨论】：