我想创建两个彼此相关的下拉菜单。 “工作主类别”和“工作子类别”。
如果您在“职位子类别”中选择了“职位主类别”，则仅会出现与“职位主类别”相关的职位。我尝试用javascript-ajax来实现它。可悲的是，我无法让这件事发挥作用，我正在寻求帮助。
这是我正在处理的在线示例的链接:
这是带有两个下拉菜单的主文件的代码:
<!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 的响应，我不知道为什么。感谢您的帮助。
最佳答案
鉴于您面临的问题，这里是对 ajax php 的完全重写。我提供的前面的示例使用了您的服务器不得安装的方法(fetch_all)。因此，我据此重写了我的示例。
这将涵盖 SQL 注入(inject)保护，因为您正在传递来自世界的 _POST 变量。任何人都可以操纵该变量的值来控制您的 sql 查询。这就是为什么准备如此重要，而且是必须的。
现在使用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>"
);
}
}
});
这会按每行的 length(这是一个数组长度，而不是字符长度)对每行的 response 数组进行循环，然后通过 访问该字段>i 索引。不需要对象子名，因为 php 的输出不包含它们。
这一切都在我的旧服务器上进行了测试，该服务器也没有安装 fetch_all，并且已验证没有错误。
关于javascript - 两个下拉菜单，它们与 php 和 javascript 相关，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48389503/