Question

我想创建两个相互关联的下拉菜单。 “job-maincategory”和“job-subcategory”。

如果您在“job-subcategory”中选择“job-maincategory”，则只有与“job-maincategory”相关的作业才会出现。我尝试用javascript-ajax实现它。可悲的是，我没有得到工作的东西，我正在寻求帮助。

以下是我正在进行的在线示例的链接：

Example

以下是带有两个dropdownmenus的主文件的代码：

<!DOCTYPE html>
<html>
<head>
<title>Dayjob - Kategorien</title>
<meta charset="UTF-8" />

<script src="js/jquery-3.2.1.js"></script>
<script src="js/categorydropdown.js"></script>

</head>
<body>
<?php

$servername = "xxxxxx";
$username = "xxxxxx";
$passwordmysql = "xxxxxx";
$dbname ="xxxxxx";

$conn = mysqli_connect($servername, $username, $passwordmysql, $dbname);    
mysqli_query($conn, "SET NAMES 'utf8'");

    $sqlgetcategory = "SELECT `jobcategory` FROM `jobcategory` ORDER BY `jobcategory` ASC";
    $jobcategory = $conn->query($sqlgetcategory);

        echo "<select name=\"selectjobcategorysubchoicemain\" id=\"selectjobcategorysubchoicemain\">";
        echo "<option value=\"\" disabled selected>Hauptategorie</option>";
        while ($schleife = $jobcategory->fetch_assoc()){
            echo "<option value=".$schleife['jobcategory'].">".$schleife['jobcategory']."</option>";
        }
        echo "<option value=\"nocategory\">Sonstiges..</option>";
        echo "</select>";


?>

        <select id="selectjobcatergorysub">
            <option value="0">- Select -</option>
        </select>

</body>
</html>

以下是更改“job-maincategory”时触发的javascript文件：

$(document).ready(function(){

        $("#selectjobcategorysubchoicemain").change(function(){
            var data = $("#selectjobcategorysubchoicemain").serialize();
            window.alert(data);

            $.ajax({
                url: 'categorysubdropdown.php',
                type: 'post',
                data: data,
                dataType: 'json',
                success:function(response){

                    window.alert(response);

                    $("#selectjobcatergorysub").empty();


                    $("#selectjobcatergorysub").append("<option value='"+response+"'>"+response+"</option>");     


                }
            });
        });

    });

这是从.javascript文件的ajax触发的.php文件：

<?php

$servername = "xxxxxx";
$username = "xxxxxx";
$passwordmysql = "xxxxxx";
$dbname ="xxxxxx";


$conn = mysqli_connect($servername, $username, $passwordmysql, $dbname);    
mysqli_query($conn, "SET NAMES 'utf8'");


    $choicemain = $_POST['selectjobcategorysubchoicemain'];



    $sqlgetcategorysub = "SELECT `jobcategory`, `jobcategorysub` FROM `jobcategorysub` WHERE `jobcategory` = '$choicemain' ORDER BY `jobcategorysub` ASC";

    $jobcategorysub = $conn->query($sqlgetcategorysub);


    $jobsubcategory_arr = array();

    while($row = mysqli_fetch_array($jobcategorysub) ){
    $subjobcat = $row['jobcategorysub'];
    $jobsubcategory_arr = array("jobcategorysub" => $subjobcat);
    }

echo json_encode($jobsubcategory_arr);

?>

目前的问题是我只回复“[object Object]”作为来自php的回复，我不知道为什么。谢谢您的帮助。

Answer 1

鉴于您遇到的问题，这里是对您的ajax php的完全重写。我提供的前一个示例使用了服务器不能安装的方法（fetch_all）。因此，我已经根据这个改写了我的例子。

这将涵盖sql注入保护，因为您从世界传递_POST变量。任何人都可以操纵该变量的值来控制您的SQL查询。这就是为什么prepare非常重要，也是必须的。

现在使用bind_result完成输出（并且sql简化为仅需要一个字段返回），因为您无法访问更简单的单行方法fetch_all。这也被调整为仅返回所需值的单个数组。不是一个对象数组（减少了不必要的{name：value}浪费）。

<强> categorysubdropdown.php ：

<?php
$servername    = "xxxxxx";// you really should keep this db setup in an include, 
$username      = "xxxxxx";// and then do include_once('/dbsetup.php');
$passwordmysql = "xxxxxx";
$dbname        = "xxxxxx";
$conn = new mysqli($servername, $username, $passwordmysql, $dbname);
$conn->set_charset("utf8");

if ( !empty($_POST['selectjobcategorysubchoicemain']) ) {
    $stmt = $conn->prepare("SELECT jc.jobcategorysub 
                            FROM jobcategorysub as jc 
                            WHERE jc.jobcategory = ? 
                            ORDER BY jc.jobcategorysub ASC");
    $stmt->bind_param('s',$_POST['selectjobcategorysubchoicemain']);
    $stmt->bind_result($jobcategorysub);
    $stmt->execute();

    $output = array();
    while ($stmt->fetch()) { $output[] = $jobcategorysub; }
    echo json_encode( $output );
}
?>

你的ajax应该与php输出一起使用：

$.ajax({
    url: 'categorysubdropdown.php',
    type: 'post',
    data: data,
    dataType: 'json',
    success: function(response) {
        console.log(response);// to debug json return
        $("#selectjobcatergorysub").empty();
        for (var i = 0; i < response.length; i++ ){
            $("#selectjobcatergorysub").append(
                 "<option value='"+ response[i] +"'>"+ response[i] +"</option>"
            );
        }
    }
});

这会在response数组中为每一行循环length（这是一个数组长度，而不是字符长度），然后通过i索引访问该字段。不需要对象子名，因为php的输出不包含它们。

这一切都在我没有安装fetch_all的旧服务器上进行了测试，并且验证没有错误。

Answer 2

如所问，以下是如何解决：

更改您的php脚本以返回包含所有结果的数组：

PHP：

    // Init the displayed array
    $ret = [];
    while($row = mysqli_fetch_array($jobcategorysub) ){
      $subjobcat = $row['jobcategorysub'];
      $jobsubcategory_arr = array("jobcategorysub" => $subjobcat);
      // Add each line to the array to display
      $ret[] = $jobsubcategory_arr;
    }
    // display the array as json
    echo json_encode($ret);

在您的javascript中，<option>的构造现在错误了：

的javascript：

// in your callback, you loop over the array returned
for (var i = 0; i < response.length; i++) {
   // Here you access one of the result (a line of the array)
   var r = response[i];
    // Construct your select by accessing variable from your object
    $("#selectjobcatergorysub").append("<option value='"+r.jobcategorysub +"'>"+r.jobcategorysub +"</option>");
}

现在：在PHP中构建一个数组数组，每行包含一个结果，因此每行包含一个您想要的数据。在您的javascript中，您从返回的数组中构造<select>。如果您是PHP新手，我建议使用一个有助于受到大多数已知漏洞保护的框架。

两个下拉菜单，用php和javascript相互关联

2 个答案: