下拉列表的 Ajax 和 SQL 填充
Posted
技术标签:
【中文标题】下拉列表的 Ajax 和 SQL 填充【英文标题】：Ajax and SQL population of a dropdown 【发布时间】：2017-08-26 16:59:10 【问题描述】：这似乎是我一生中的痛苦我现在已经花了几个小时在这上面，但似乎没有一个研究过的解决方案可以解决它。我的代码应该从名为“notes”的数据库中填充一个下拉列表，填充的字段应该是“name”，然后程序应该选择名称相同的所有记录。除了它似乎没有填充列表。我认为这不是数据库连接错误，因为选择所有患者的所有记录都显示出来。
这是我的代码：
<?php
// php select option value from database
$hostname = "localhost";
$username = "root";
$password = "";
$databaseName = "CareM_database";
// connect to mysql database
//load_data_select.php
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
$connect = mysqli_connect($hostname, $username, $password, $databaseName);
function fill_name($connect)
$output = '';
$sql = "SELECT name, id FROM name";
$result = mysqli_query($connect, $sql);
while($row = mysqli_fetch_array($result))
$output .= '<option value="'.$row["id"].'">'.$row["name"].'</option>';
return $output;
function fill_patients($connect)
$output = '';
$sql = "SELECT * FROM notes";
$result = mysqli_query($connect, $sql);
while($row = mysqli_fetch_array($result))
$output .= '<div class="col-md-3">';
$output .= '<div style="border:1px solid #ccc; padding:20px; margin-bottom:20px;">'.$row["details"].'';
$output .= '</div>';
$output .= '</div>';
return $output;
?>
<!DOCTYPE html>
<html>
<head>
<title>Patient Notes View</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<h3>
<select name="name" id="name">
<option value="">Show All Patients</option>
<?php echo fill_patients($connect); ?>
</select>
<br /><br />
<div class="row" id="show_patients">
<?php echo fill_patients($connect);?>
</div>
</h3>
</div>
</body>
</html>
<script>
$(document).ready(function()
$('#name').change(function()
var name_id = $(this).val();
$.ajax(
url:"load_data.php",
method:"POST",
data:id:id,
success:function(data)
$('#show_name').html(data);
);
);
);
</script> 【问题讨论】：
代码中有一些错误的地方，例如data:id:id 应该是 id: name_id 并且是您的代码文件 load_data.php 还是 load_data_select.php？此外，您调用了两次 fill_patients，看起来您的 fill_patients 方法中没有基于患者 ID 的过滤器。启动浏览器的调试器，看看 ajax 调用返回了什么？ 【参考方案1】：您没有在select 中调用fill_name 函数，而是调用fill_patients，而且我在您的html 中没有看到任何ID 为#show_name 的元素。
<?php
// php select option value from database
$hostname = "localhost";
$username = "root";
$password = "";
$databaseName = "CareM_database";
// connect to mysql database
//load_data_select.php
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
$connect = mysqli_connect($hostname, $username, $password, $databaseName);
function fill_name($connect)
$output = '';
$sql = "SELECT name, id FROM name";
$result = mysqli_query($connect, $sql);
while($row = mysqli_fetch_array($result))
$output .= '<option value="'.$row["id"].'">'.$row["name"].'</option>';
return $output;
function fill_patients($connect)
$output = '';
$sql = "SELECT * FROM notes";
$result = mysqli_query($connect, $sql);
while($row = mysqli_fetch_array($result))
$output .= '<div class="col-md-3">';
$output .= '<div style="border:1px solid #ccc; padding:20px; margin-bottom:20px;">'.$row["details"].'';
$output .= '</div>';
$output .= '</div>';
return $output;
?>
<!DOCTYPE html>
<html>
<head>
<title>Patient Notes View</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</script>
</head>
<body>
<br /><br />
<div class="container">
<h3>
<select name="name" id="name">
<option value="">Show All Patients</option>
<!-- <?php echo fill_patients($connect); ?> -->
<!-- call fill_name function instead of the above function -->
<?php echo fill_name($connect); ?>
</select>
<br /><br />
<div class="row" id="show_patients">
<?php echo fill_patients($connect);?>
</div>
</h3>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(document).ready(function()
$('#name').change(function()
var name_id = $(this).val();
$.ajax(
url:"load_data.php",
method:"POST",
data:id: name_id,
success:function(data)
$('#show_name').html(data);
);
);
);
</script>
</body>
</html> 结果
【讨论】：
您在ajax 调用中使用未声明的变量 id 而不是 name_id。【参考方案2】：
首先在添加引导 js 之前添加 jquery.min.js
【讨论】：
这并没有改变什么 您需要进行更改以将您的视图与您的逻辑分开以分离您的关注点并使您的代码更具可读性。我建议使用任何 MVC 框架，例如 codeigniter 请在您的 mozila 浏览器中添加 Firebug 扩展并使用 F+12 调试您的脚本，您将在其中检查您的请求/响应参数。以上是关于下拉列表的 Ajax 和 SQL 填充的主要内容，如果未能解决你的问题，请参考以下文章
如何根据使用 jQuery/AJAX 和 PHP/MySQL 选择的第一个下拉列表填充第二个下拉列表？