php ajax依赖下拉列表不从表中加载数据
Posted
技术标签:
【中文标题】php ajax依赖下拉列表不从表中加载数据【英文标题】：php ajax dependent dropdown not loading data from table 【发布时间】：2021-03-30 11:59:09 【问题描述】：我正在尝试使用 php 和 ajax 创建一个依赖下拉列表。我期待的是选择汽车的“制作”，相关的汽车模型应该自动加载“模型”下拉列表。我已经完成了汽车“制造”的预加载。但“模型”下拉菜单仍然为空。我使用了一个故事并在 sql 语句中使用（选择模型，其中 make= 选择制作）。这是我的代码
php
<form method="GET">
<div class="form-group">
<select class="form-control" name="make" id="make">
<option value="" disabled selected>--Select Make--</option>
<?php
$stmt=$pdo->query("SELECT DISTINCT make FROM cars WHERE cartype='general' ");
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
?>
<option value="<?= $row['make']; ?>"> <?= $row['make']; ?></option>
<?php ?>
</select>
</div>
<div class="form-group">
<select class="form-control" name="model" id="model">
<option value="" disabled selected>--Select Model--</option>
</select>
</div>
.......
....
.....
脚本
<script type="text/javascript">
$(document).ready( function ()
// alert("Hello");
$(#make).change(function()
var make = $(this).val();
$.ajax(
url:"filter_action.php",
method:"POST",
data:Make:make,
success: function(data)
$("#model").html(data);
);
);
);
</script>
filter_action.php
<?php
include('db_config2.php');
$output='';
$stmt=$pdo->query("SELECT DISTINCT model FROM cars WHERE cartype='general' AND make= '".$_POST['Make']."'");
$output .='<option value="" disabled selected>--Select Model--</option>';
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
$output .='<option value="'.$row["model"].'">'.$row["model"].'</option>' ;
echo $output;
?>
【问题讨论】：
这$(#make) 应该用引号括起来，即 :$("#make") 。另外，检查浏览器控制台是否还有其他错误？
您通过直接嵌入用户提供的输入数据使您的 SQL 容易受到注入攻击
@Swati 谢谢。是的，我已将其更改为 $("#make") 但结果仍然相同
你得到了什么结果？？
@KUMAR 不，“make”下拉菜单正在工作，但“model”下拉菜单仍然为空
【参考方案1】：
Javascript 中似乎存在一些错误，这些错误在开发人员控制台中很明显，并且您的 PHP 使 mysql 服务器容易受到 sql 注入攻击。
<script>
$(document).ready( function ()
// The string should be within quotes here
$('#make').change(function(e)
var make = $(this).val();
$.ajax(
url:"filter_action.php",
method:"POST",
data:'Make':make,
success: function(data)
$("#model").html(data);
;//this needed to be closed
);
);
);
</script>
在 sql 中直接使用用户提供的数据会打开您的 db to sql 注入攻击。为了缓解这种情况，您需要采用"Prepared Statements" - 因为无论如何您都在使用 PDO，这应该是理所当然的事情。
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST['Make'] ) )
# The placeholders and associated values to be used when executing the sql cmd
$args=array(
':type' => 'general', # this could also be dynamic!
':make' => $_POST['Make']
);
# Prepare the sql with suitable placeholders
$sql='select distinct `model` from `cars` where `cartype`=:type and `make`=:make';
$stmt=$pdo->prepare( $sql );
# commit the query
$stmt->execute( $args );
# Fetch the results and populate output variable
$data=array('<option disabled selected hidden>--Select Model--');
while( $rs=$stmt->fetch(PDO::FETCH_OBJ) )$data[]=sprintf('<option value="%1$s">%1$s', $rs->model );
# send it to ajax callback
exit( implode( PHP_EOL,$data ) );
?>
【讨论】：
非常感谢您的时间和帮助。不幸的是，它没有用。感谢您为防止 sql 注入而准备的 stmt 的建议。基本上我复制了你的代码，但仍然没有结果。 你能打开开发控制台并报告观察到的任何错误吗？ 我不确定你是否愿意。我在 cpanel 上编码，而不是在本地服务器上。 ? NFI - 从未见过 cPanel。只是想知道是否有任何js错误【参考方案2】：我已经尝试使用php pdo。
首先我创建了 3 个文件。
db.php
htmlDropdown.php
modelAjax.php
这里，db.php 文件可以包含我的数据库连接代码。和htmlDropdown.php 文件包含我的汽车和模型下拉列表。和modelAjax.php 文件包含用于获取所有模型的ajax。
db.php
<?php
$host_name = 'localhost';
$user_name = 'root';
$password = '';
$db_name = '***';
$conn = new PDO("mysql:host=$host_name; dbname=$db_name;", $user_name, $password);
?>
htmlDropdown.php
<?php include "db.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cars</title>
<!-- jQuery cdn link -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<!-- Ajax cdn link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxy/1.6.1/scripts/jquery.ajaxy.min.js" integrity="sha512-bztGAvCE/3+a1Oh0gUro7BHukf6v7zpzrAb3ReWAVrt+bVNNphcl2tDTKCBr5zk7iEDmQ2Bv401fX3jeVXGIcA==" crossorigin="anonymous"></script>
</head>
<body>
<?php
$car_sql = 'SELECT car_name FROM cars'; //select all cars query
$cars_statement = $conn->prepare($car_sql);
$cars_statement->execute();
?>
<select name="car" id="car">
<option value="">Cars</option>
<?php
while ($cars = $cars_statement->fetch()) // fetch all cars data
?>
<option value="<?php echo $cars['car_name']; ?>"><?php echo $cars['car_name']; ?></option>
<?php
?>
</select><br><br>
<select name="model" id="model">
<option value="">Model</option>
</select>
</body>
</html>
<script>
$(document).ready(function ()
$('#car').on("change", function ()
let car = $(this).val(); // car value
$.post("http://local.***answer1/cars/modelAjax.php", car_name : car , function (data, status) // ajax post send car name in modelAjax.php file
let datas = JSON.parse(data); // convert string to json object
let options = '';
options = '<option>Model</option>';
$.each(datas.model, function (key, value)
options += "<option>"+value.modal_name+"</option>";
);
$('#model').html(options);
);
);
);
</script>
modelAjax.php
<?php
include "db.php";
if ($_POST['car_name'])
$car_id_sql = "SELECT id FROM cars WHERE car_name LIKE ?"; // get id from given car name
$id_statement = $conn->prepare($car_id_sql);
$id_statement->execute([$_POST['car_name']]);
$id = $id_statement->fetch();
$model_sql = "SELECT modal_name FROM models WHERE car_id = ?"; // get model name from given id
$model_statement = $conn->prepare($model_sql);
$model_statement->execute([$id['id']]);
$models = $model_statement->fetchAll();
echo json_encode(["model" => $models]); // i have a conver array to json object
?>
【讨论】：
非常感谢。我非常感谢您的时间和精力。我需要的是将品牌和模型保持在同一个表中，并使用“make”而不是“id”。类似的东西（从制造=选定制造的汽车中选择模型）。你能帮忙吗？以上是关于php ajax依赖下拉列表不从表中加载数据的主要内容，如果未能解决你的问题，请参考以下文章
为啥在下拉列表中加载组件时不会触发 ngmodelChange 事件？