PHP AJAX使用JSON下拉

时间:2015-05-08 07:43:50

标签: javascript php jquery ajax json

我正在尝试使用带有json格式数据的ajax获取链接两下拉。我尝试了以下代码,但它只显示了部门和项目的空白下拉列表。我不确定我的代码在哪里出错。

主页index.php的代码如下:

<?php
include_once("includes/connection.php");?>
<html><head> <script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/Javascript">
    function showdept(){
        $('#deptdropdown').empty();
        $('#deptdropdown').append("<option> Loading...</option>");
        $('#projectdropdown').append("<option value='0'> All Projects </option>");

        $.ajax({
            type:"POST",
            url:"departmentdropdown.php",
            contentType:"application/json; charset:utf-8",
            dataType:"json",
            success: function(data){
                $('#deptdropdown').empty();
                $('#deptdropdown').append("<option value='0'> All Departments </option>");
                $.each(data,function(i,item){
                    $('#deptdropdown').append('<option value="'+ data[i].deptID +'">'+ data[i].deptname +'</option>');
                });
            },
            complete: function(){
            }
        });
    }

     function showproject(departmentID){        
        $('#projectdropdown').empty();
        $('#projectdropdown').append("<option> Loading...</option>");
        $.ajax({
            type:"POST",
            url:"projectdropdown.php",
            contentType:"application/json; charset:utf-8",
            dataType:"json",
            success: function(data){
                $('#projectdropdown').empty();
                $('#projectdropdown').append("<option value='0'> All Projects </option>");
                $.each(data,function(i,item){
                    $('#projectdropdown').append('<option value="'+ data[i].projectID +'">'+ data[i].projectname+'</option>');
                });
            },
            complete: function(){
            }
        });
    } 

    $(document).ready(function(){
        showdept();
         $("#deptdropdown").change(function(){
            var deptid= $("#deptdropdown").val();
            showproject(deptid);
        }); 
    }); 
</script></head><body>  <span>Departments</span><br />
<select id="deptdropdown"></select>
<br /><br />
<span>Projects</span><br />
<select id="projectdropdown"></select>  </body></html>

departmentdropdown.php文件的代码如下:

<?php
include_once("includes/connection.php");
$query=" SELECT deptID, deptname FROM departmentdetails WHERE active_status=1 ORDER BY deptname";
$result=mysqli_query($con,$query);
    $data=array();
    while($array=mysqli_fetch_assoc($result)){
        $data[] = array('deptID' => $array['deptID'], 'deptname' => $array['deptname']);
    }
    header('Content-type: application/json');
    echo json_encode($data);?>

projectdropdown.php文件的代码如下:

<?php
include_once("includes/connection.php");

$query="SELECT projectID, deptID projectname FROM projectdetails WHERE active_status=1 AND deptID='".$_GET['departmentID']."' ORDER BY projectname";
$result=mysqli_query($con,$query);
    $data=array();
    while($array=mysqli_fetch_assoc($result)){
        $data[] = array('proID' => $array['projectID'], 'depID' => $array['deptID'], 'projectname' => $array['projectname']);
    }
    header('Content-type: application/json');
    echo json_encode($data);?>

1 个答案:

答案 0 :(得分:1)

+data[i].deptID之后遗失data[i].projectID。更改以下内容

showdept()

$('#deptdropdown').append('<option value="'+ data[i].deptID '">'+ data[i].deptname +'</option>');

showproject(departmentID)

$('#projectdropdown').append('<option value="'+ data[i].projectID'">'+ data[i].projectname+'</option>');

showdept()

 $('#deptdropdown').append('<option value="'+ data[i].deptID +'">'+ data[i].deptname +'</option>');

showproject(departmentID)

$('#projectdropdown').append('<option value="'+ data[i].projectID +'">'+ data[i].projectname+'</option>');