Javascript 使用ajaxphp和mariadb进行动态选择

我正在尝试使用ajax、php和querys对BBDD进行动态选择。 出于这个原因，我有三个部分，在html中我用我对BBDD所做的咨询填充了我的选择选项，这个咨询是用AJAX实现的，咨询BBDD的脚本是用php实现的。 我的html如下所示：

<div class="student-data-block">
                    <div class="row">
                        <div class="col-md-6">
                            <label>Nombre</label>
                            <input type="text" name="name" value="" placeholder=""/>
                            <br/>
                            <label>Apellido</label>
                            <input type="text" name="last_name" value="" placeholder=""/>
                            <br/>
                            <label>Universidad</label>
                            <select name="universitySelect" id="universitySelect" value="" placeholder="">
                                <option value="">Escoger universidad</option>
                                <?php foreach ($universities as $name) { ?>
                                <option value="<?php echo $name['UniversityID']?>"><?php echo $name['UniversityName']?></option>
                                <?php } ?>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label>Campus</label>
                            <select name="campusSelect" id="campusSelect" value="" placeholder="">
                                <option value="">Escoger campus</option>
                            </select>
                            <br/>
                            <label>Carrera</label>
                            <select name="careerSelect" id="careerSelect" value="" placeholder="">
                                <option value="">Escoger carrera</option>
                            </select>
                            <br/>
                            <label>Nivel académico</label>
                            <select name="study_type" value=""
                                    placeholder="">
                                <option value="grado">Escoger nivel académico</option>
                                <option value="grado">Grado</option>
                                <option value="master">Máster</option>
                                <option value="postgrado">Postgrado</option>
                                <option value="doctorado">Doctorado</option>
                            </select>
                            <br/>
                        </div>
                    </div>

    if(!empty($_REQUEST["universityID"])){ //&& isset($_REQUEST["universityID"])
    $q_campus = 'select c.CampusID, c.Name as CareerName from unithinks.campus c
              where UniversityID="$_REQUEST["universityID"]" order by c.CampusID asc ';

    //Count total number of rows
    $rowCampus = query($db_connection, $q_campus);

    //State option list
    if($rowCampus > 0){
        echo '<option value="">Selecciona campus</option>';
        foreach ($rowCampus as $campus){
            echo '<option value="'.$campus['CampusID'].'">'.$campus['CareerName'].'</option>';
        }
    }else{
        echo '<option value="">Selecciona primero universidad</option>';
    }
}
else if(!empty($_REQUEST["campusID"])){
    $q_careers = 'select ca.CareerID, ca.Name as CareerName from unithinks.careers ca
              where CampusID = "$_REQUEST["campusID"]" order by ca.CareerID asc ';
    $rowCareers = query($db_connection, $q_campus);

    //State option list
    if($rowCareers > 0){
        echo '<option value="">Selecciona Carrera</option>';
        foreach ($rowCareers as $careers){
            echo '<option value="'.$careers['CampusID'].'">'.$careers['CareerName'].'</option>';
        }
    }else{
        echo '<option value="">Selecciona primero universidad o campus</option>';
    }

$('#universitySelect').change(function() {
            var universityID = $("#universitySelect").val();
            //alert(universityID);
            if (universityID) {
                $.ajax({
                    type: 'POST',
                    url: 'actions/AjaxSelect.php',
                    data: 'universityID=' + universityID,
                    success: function (html)
                        {
                            console.log(html);
                        $('#campusSelect').html(html);
                        $('#careerSelect').html('<option value="">Selecciona tu carrera</option>');
                        }
                });
            } else {
                $('#campusSelect').html('<option value="">Selecciona tu campus primero</option>');
                $('#careerSelect').html('<option value="">Selecciona tu carrera primero</option>');
            }
        });

名义


阿佩利多


大学
埃斯科格大学
校园
埃斯科格校区


卡雷拉
埃斯科格卡雷拉


尼维尔学院
埃斯科格·尼维尔学院
格拉多
马斯特
研究生
博士班研究

首先，我们查阅BBDD并填充第一个选择，即#大学选择，然后填充以下选择，我需要为用户选择选项，将其他选择功能填充到选项选择中。为了构建以下内容，我们使用Ajax，具体如下代码：

$(document).ready(function() {
        $('#universitySelect').change(function() {
            var universityID = $("#universitySelect").val();
            if (universityID) {
                $.ajax({
                    type: 'POST',
                    url: 'action/AjaxSelect.php',
                    data: 'universityID=' + universityID,
                    success: function (html) {
                        $('#campusSelect').html(html);
                        $('#careerSelect').html('<option value="">Selecciona tu carrera</option>');
                    }
                });
            } else {
                $('#campusSelect').html('<option value="">Selecciona tu campus primero</option>');
                $('#careerSelect').html('<option value="">Selecciona tu carrera primero</option>');
            }
        });
        $('#campusSelect').change(function(){
                var campusID = $("#campusSelect").val();
                if (campusID) {
                    $.ajax({
                        type: 'POST',
                        url: 'action/AjaxSelect.php',
                        data: 'campusID=' + campusID,
                        success: function (html) {
                            $('#careerSelect').html(html);
                        }
                    });
                }
                else {
                    $('#careerSelect').html('<option value="">Selecciona tu carrera primero</option>');
                }
            });
    }   );

$（文档）.ready（函数（）{
$（“#大学选择”）.change（函数（）{
var universityID=$（“#universitySelect”）.val（）；
国际单项体育联合会（大学）{
$.ajax({
键入：“POST”，
url:'action/AjaxSelect.php'，
数据：“universityID=”+universityID，
成功：函数（html）{
$（'campusSelect'）.html（html）；
$（'#careerSelect'）.html（'selectiona tu carrera'）；
}
});
}否则{
$（'campusSelect'）.html（'seleccionatucampusprimero'）；
$（'#careerSelect'）.html（'selectiona tu carrera primero'）；
}
});
$（'#campusSelect'）。更改（函数（）{
var campusID=$（“#campusSelect”）.val（）；
if（campusID）{
$.ajax({
键入：“POST”，
url:'action/AjaxSelect.php'，
数据：“campusID=”+campusID，
成功：函数（html）{
$（'#careerSelect'）.html（html）；
}
});
}
否则{
$（'#careerSelect'）.html（'selectiona tu carrera primero'）；
}
});
}   );

最后，当我收到AJAX的数据时，我参考BBDD来填充其他选择。我的AjaxSelect.php如下所示：

<div class="student-data-block">
                    <div class="row">
                        <div class="col-md-6">
                            <label>Nombre</label>
                            <input type="text" name="name" value="" placeholder=""/>
                            <br/>
                            <label>Apellido</label>
                            <input type="text" name="last_name" value="" placeholder=""/>
                            <br/>
                            <label>Universidad</label>
                            <select name="universitySelect" id="universitySelect" value="" placeholder="">
                                <option value="">Escoger universidad</option>
                                <?php foreach ($universities as $name) { ?>
                                <option value="<?php echo $name['UniversityID']?>"><?php echo $name['UniversityName']?></option>
                                <?php } ?>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label>Campus</label>
                            <select name="campusSelect" id="campusSelect" value="" placeholder="">
                                <option value="">Escoger campus</option>
                            </select>
                            <br/>
                            <label>Carrera</label>
                            <select name="careerSelect" id="careerSelect" value="" placeholder="">
                                <option value="">Escoger carrera</option>
                            </select>
                            <br/>
                            <label>Nivel académico</label>
                            <select name="study_type" value=""
                                    placeholder="">
                                <option value="grado">Escoger nivel académico</option>
                                <option value="grado">Grado</option>
                                <option value="master">Máster</option>
                                <option value="postgrado">Postgrado</option>
                                <option value="doctorado">Doctorado</option>
                            </select>
                            <br/>
                        </div>
                    </div>

    if(!empty($_REQUEST["universityID"])){ //&& isset($_REQUEST["universityID"])
    $q_campus = 'select c.CampusID, c.Name as CareerName from unithinks.campus c
              where UniversityID="$_REQUEST["universityID"]" order by c.CampusID asc ';

    //Count total number of rows
    $rowCampus = query($db_connection, $q_campus);

    //State option list
    if($rowCampus > 0){
        echo '<option value="">Selecciona campus</option>';
        foreach ($rowCampus as $campus){
            echo '<option value="'.$campus['CampusID'].'">'.$campus['CareerName'].'</option>';
        }
    }else{
        echo '<option value="">Selecciona primero universidad</option>';
    }
}
else if(!empty($_REQUEST["campusID"])){
    $q_careers = 'select ca.CareerID, ca.Name as CareerName from unithinks.careers ca
              where CampusID = "$_REQUEST["campusID"]" order by ca.CareerID asc ';
    $rowCareers = query($db_connection, $q_campus);

    //State option list
    if($rowCareers > 0){
        echo '<option value="">Selecciona Carrera</option>';
        foreach ($rowCareers as $careers){
            echo '<option value="'.$careers['CampusID'].'">'.$careers['CareerName'].'</option>';
        }
    }else{
        echo '<option value="">Selecciona primero universidad o campus</option>';
    }

$('#universitySelect').change(function() {
            var universityID = $("#universitySelect").val();
            //alert(universityID);
            if (universityID) {
                $.ajax({
                    type: 'POST',
                    url: 'actions/AjaxSelect.php',
                    data: 'universityID=' + universityID,
                    success: function (html)
                        {
                            console.log(html);
                        $('#campusSelect').html(html);
                        $('#careerSelect').html('<option value="">Selecciona tu carrera</option>');
                        }
                });
            } else {
                $('#campusSelect').html('<option value="">Selecciona tu campus primero</option>');
                $('#careerSelect').html('<option value="">Selecciona tu carrera primero</option>');
            }
        });

if（！empty（$_请求[“universityID”]）{/&&isset（$_请求[“universityID”]））
$q_campus='从unithinks.campus c中选择c.CampusID、c.Name作为CareerName
其中UniversityID=“$”c.CampusID asc提出的请求[“UniversityID”]”命令；
//计算总行数
$rowcumpus=query（$db\u连接，$q\u校园）；
//状态选项列表
如果（$rowCampus>0）{
echo“Selecciana校园”；
foreach（$rowCampus作为$campus）{
echo'.$campus['CareerName'.'；
}
}否则{
echo“Selecciona primero universidad”；
}
}
如果（！empty（$\u请求[“campusID”]），则为else{
$q_careers='从unithinks.careers ca中选择ca.CareerID，ca.Name作为CareerName
其中CampusID=“$”由ca.CareerID asc订购的请求[“CampusID”]；
$rowCareers=query（$db\U连接，$q\U校园）；
//状态选项列表
如果（$rowCareers>0）{
echo“Selecciana Carrera”；
foreach（$rowCareers作为$careers）{
回显“.$careers['CareerName']”；
}
}否则{
echo“Selecciona primero大学校园”；
}

我不知道错误在哪里，我知道代码在到达ajax请求之前运行良好，在ajax中我不知道它是否正在发送帖子。 （另外，请说明咨询会很好地返回数据。）

对不起，我是新用php的。

---

提前感谢您。

错误在AJAX的url和BDD的参考中

代码如下：

<div class="student-data-block">
                    <div class="row">
                        <div class="col-md-6">
                            <label>Nombre</label>
                            <input type="text" name="name" value="" placeholder=""/>
                            <br/>
                            <label>Apellido</label>
                            <input type="text" name="last_name" value="" placeholder=""/>
                            <br/>
                            <label>Universidad</label>
                            <select name="universitySelect" id="universitySelect" value="" placeholder="">
                                <option value="">Escoger universidad</option>
                                <?php foreach ($universities as $name) { ?>
                                <option value="<?php echo $name['UniversityID']?>"><?php echo $name['UniversityName']?></option>
                                <?php } ?>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label>Campus</label>
                            <select name="campusSelect" id="campusSelect" value="" placeholder="">
                                <option value="">Escoger campus</option>
                            </select>
                            <br/>
                            <label>Carrera</label>
                            <select name="careerSelect" id="careerSelect" value="" placeholder="">
                                <option value="">Escoger carrera</option>
                            </select>
                            <br/>
                            <label>Nivel académico</label>
                            <select name="study_type" value=""
                                    placeholder="">
                                <option value="grado">Escoger nivel académico</option>
                                <option value="grado">Grado</option>
                                <option value="master">Máster</option>
                                <option value="postgrado">Postgrado</option>
                                <option value="doctorado">Doctorado</option>
                            </select>
                            <br/>
                        </div>
                    </div>

    if(!empty($_REQUEST["universityID"])){ //&& isset($_REQUEST["universityID"])
    $q_campus = 'select c.CampusID, c.Name as CareerName from unithinks.campus c
              where UniversityID="$_REQUEST["universityID"]" order by c.CampusID asc ';

    //Count total number of rows
    $rowCampus = query($db_connection, $q_campus);

    //State option list
    if($rowCampus > 0){
        echo '<option value="">Selecciona campus</option>';
        foreach ($rowCampus as $campus){
            echo '<option value="'.$campus['CampusID'].'">'.$campus['CareerName'].'</option>';
        }
    }else{
        echo '<option value="">Selecciona primero universidad</option>';
    }
}
else if(!empty($_REQUEST["campusID"])){
    $q_careers = 'select ca.CareerID, ca.Name as CareerName from unithinks.careers ca
              where CampusID = "$_REQUEST["campusID"]" order by ca.CareerID asc ';
    $rowCareers = query($db_connection, $q_campus);

    //State option list
    if($rowCareers > 0){
        echo '<option value="">Selecciona Carrera</option>';
        foreach ($rowCareers as $careers){
            echo '<option value="'.$careers['CampusID'].'">'.$careers['CareerName'].'</option>';
        }
    }else{
        echo '<option value="">Selecciona primero universidad o campus</option>';
    }

$('#universitySelect').change(function() {
            var universityID = $("#universitySelect").val();
            //alert(universityID);
            if (universityID) {
                $.ajax({
                    type: 'POST',
                    url: 'actions/AjaxSelect.php',
                    data: 'universityID=' + universityID,
                    success: function (html)
                        {
                            console.log(html);
                        $('#campusSelect').html(html);
                        $('#careerSelect').html('<option value="">Selecciona tu carrera</option>');
                        }
                });
            } else {
                $('#campusSelect').html('<option value="">Selecciona tu campus primero</option>');
                $('#careerSelect').html('<option value="">Selecciona tu carrera primero</option>');
            }
        });

$（'universitySelect'）。更改（函数（）{
var universityID=$（“#universitySelect”）.val（）；
//警惕（大学）；
国际单项体育联合会（大学）{
$.ajax({
键入：“POST”，
url:'actions/AjaxSelect.php'，
数据：“universityID=”+universityID，
成功：函数（html）
{
log（html）；
$（'campusSelect'）.html（html）；
$（'#careerSelect'）.html（'selectiona tu carrera'）；
}
});
}否则{
$（'campusSelect'）.html（'seleccionatucampusprimero'）；
$（'#careerSelect'）.html（'selectiona tu carrera primero'）；
}
});

和ajaxSelect.php：

$db_connection = Connect_MySqli($cnn);   
if(!empty($_REQUEST["universityID"])){ //&& isset($_REQUEST["universityID"])
    $q_campus = 'select c.CampusID, c.Name as CareerName from unithinks.campus c
              where UniversityID='.$_REQUEST["universityID"].' order by c.CampusID asc ';

    //Count total number of rows
    $rowCampus = query($db_connection, $q_campus);
    //State option list
    if($rowCampus > 0){
        echo '<option value="">Selecciona campus</option>';
        foreach ($rowCampus as $campus){
            echo '<option value="'.$campus['CampusID'].'">'.$campus['CareerName'].'</option>';
        }
    }else{
        echo '<option value="">Selecciona primero universidad</option>';
    }
}

$db\u connection=Connect\u MySqli（$cnn）；
如果（！empty（$_请求[“universityID”]）{/&&isset（$_请求[“universityID”]））
$q_cam