Javascript 使用Ajax填充选择框
好吧,这是我第一次尝试Ajax,它让我发疯,因为我真的无法控制它。我要做的是用数据库中的客户填充第一个框,然后使用customerID使用select.php脚本从数据库中选择所有车辆ID。 发生的情况是客户框被选中,但当选择客户时,什么也不会发生 这是我的Test.php文件:Javascript 使用Ajax填充选择框,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,好吧,这是我第一次尝试Ajax,它让我发疯,因为我真的无法控制它。我要做的是用数据库中的客户填充第一个框,然后使用customerID使用select.php脚本从数据库中选择所有车辆ID。 发生的情况是客户框被选中,但当选择客户时,什么也不会发生 这是我的Test.php文件: <?php include 'connectmysqli.php'; ?> <html> <head> <meta http-equiv="Conte
<?php include 'connectmysqli.php'; ?>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Select test</title>
<script src="./js/jquery/jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$$('#customer')
.on('change', function () {
$.getJSON('select.php', { customerId: $(this)
.val() }, function (data) {
var options = '';
for (var x = 0; x < data.length; x++) {
options += '<option value="' + data[x][
'id'] + '">' + data[x]['reg'] +
'</option>';
}
$('#vehicle')
.html(options);
});
});
</script>
</head>
<body>
<select id="customer">
<?php
$sql = <<<SQL
SELECT *
FROM `customers`
SQL;
if(!$result = $db->query($sql)){ die('There was an error running the query [' . $db->error . ']');}
while($row = $result->fetch_assoc()){
if ($row['bussinessname'] == ''){$name = $row['title'].' '.$name = $row['firstname'].' '.$name = $row['surname'];}else
{$name = $row['bussinessname'];}
echo '<option value="'.$row['customerID'].'">'.$name.'</option>';
}
echo '</select></p>'; ?>
</select>
<select id="vehicle">
</select>
</body>
</html>
<?php include 'connectmysqli.php'; ?>
<?php
$id = $_GET['customerId'];
$sql = 'SELECT * FROM vehicles WHERE customerID = ' . $id;
$result = $db->query($sql);
$json = array();
while ($row = $result->fetch_assoc()) {
$json[] = array(
'id' => $row['vehicleID'],
'reg' => $row['reg'] // Don't you want the name?
);
}
echo json_encode($json);
?>
看起来好像您正在select.php中的每个文件上创建一个JSON对象数组 下面的数组是用PHP生成的,然后用JSON编码,在我的选择中,这是最好的方法 生成JSON字符串
// select.php
$id = $_GET['customerId'];
$sql = 'SELECT * FROM vehicles WHERE customerID = ' . $id;
$result = $db->query($sql);
$json = array();
while ($row = $result->fetch_assoc()) {
$json[] = array(
'id' => $row['vehicleId'],
'name' => $row['vehicleId'] // Don't you want the name?
);
}
echo json_encode($json);
// Test.php
$('#customer').on('change', function (){
$.getJSON('select.php', {customerId: $(this).val()}, function(data){
var options = '';
for (var x = 0; x < data.length; x++) {
options += '<option value="' + data[x]['id'] + '">' + data[x]['name'] + '</option>';
}
$('#vehicle').html(options);
});
});
在页面上呈现select之前,将分配客户select的更改事件。将事件处理程序移动到document.ready中:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#customer').on('change', function (){
$.getJSON('select.php', {customerId: $(this).val()}, function(data){
var options = '';
for (var x = 0; x < data.length; x++) {
options += '<option value="' + data[x]['id'] + '">' + data[x]['reg'] + '</option>';
}
$('#vehicle').html(options);
});
});
});
</script>
将ID作为int将在这里防止SqLi,但是您应该考虑使用.< /P> 您在问题中提到的错误看起来与您的代码无关。它看起来与Chrome扩展相关
这不是问题的一部分,但以下是构建车辆选项的代码的改进版本:$.getJSON('select.php', {customerId: $(this).val()}, function(data){
var vehicle = $('#vehicle');
for (var x = 0; x < data.length; x++) {
vehicle.append(new Option(data[x].reg, data[x].id));
}
});
改善措施包括:
将select存储在一个变量中,这样我们就不必在循环的每次迭代中不断查询DOM
使用新选项。。。和。附加以创建选项并将其添加到车辆选择中。像这样构建元素比创建原始HTML要好,因为这样,您就不必担心数据中的字符——这会破坏HTML与当前代码的关系。
您的数据被解码成一个Javascript对象数组,因此对象表示法是首选的数据[x].id,而不是数据[x]['id']。
也许试着现场直播,而不是现场直播。它已被弃用,但我发现它在未加载元素时更可能工作
$$“客户”。关于“更改”,函数{
改为
$“客户”。实时“更改”,功能{
尝试$document。在“更改”上,选择Customer,function{}@Brewal为什么会这样?你能在控制台上检查一下在选择项目时是否建立了连接吗?虽然你的selectcustomer是动态添加的。这可以修复错误。但事实并非如此。你在控制台中有任何错误吗?也许你的json语法是错误的。试着将数据添加到数组中,然后执行echojson_encode$data;exit;易受SQL注入攻击beware@andy谢谢。为了简单起见,我只是想回答op的问题。但是,这是一个有效的观点。Iv用新代码编辑了我的问题,但仍然不起作用?@IainSimpson您是否更改了Test.php?是的,我更新了它们,因为它们都在上面^^,我编辑了我的问题有了新的代码,你真是一个传奇!谢谢你,我一直在想这个周末到底发生了什么事,没能解决它!谢谢!@IainSimpson没问题:请看我的编辑-添加了一些改进。
$sql = 'SELECT * FROM vehicles WHERE customerID = ' . (int)$id;
$.getJSON('select.php', {customerId: $(this).val()}, function(data){
var vehicle = $('#vehicle');
for (var x = 0; x < data.length; x++) {
vehicle.append(new Option(data[x].reg, data[x].id));
}
});