如何使用ajax基于两个下拉列表的值从数据库检索数据? [英] how to retrieve data from database based on the value of two drop down list using ajax?

问题描述

我已经实现了示例.在这里，我仅使用一个下拉列表检索数据.它的工作正常.但是，如果我要对两个下拉列表执行相同的操作，则必须基于两个下拉列表的值来检索数据库中的值. 我正在尝试如下: 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>";

请帮助我该怎么做.

解决方案

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

尝试将其用于您的选择

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

i have implemented the Example. Here i am retrieving data using only one drop down list. Its working fine. But if I want to do the same for two drop down list that is values from database have to be retrieved based on the value of two drop down list. I am trying as follows: Ajax script-

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

drop down lists-

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

$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>";

Please help me how to do it.

解决方案

There is an issue with how you are referencing the selected values of the SELECT elements, or more accurately, how your SELECT elements are structured. You need to place your ID (branch and sem) on the SELECT and not the individual options and you can remove the this.value parameter when you call showCourses() onchange because your function isn't set up to accept a parameter.

Try using this for your SELECTs

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

I also noticed that your check for selected values is looking for an empty string for either str or str1, but your "Select One" options have a value of 0 so you may want to change:

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

To

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

这篇关于如何使用ajax基于两个下拉列表的值从数据库检索数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！