使用 AJAX、PHP 和 MySQL 链式填充 HTML 选择框
Posted
技术标签:
【中文标题】使用 AJAX、PHP 和 MySQL 链式填充 HTML 选择框【英文标题】：Chain populate HTML select boxes using AJAX, PHP and MySQL 【发布时间】：2015-08-28 21:59:52 【问题描述】：我的特殊表单有两个选择框。在页面加载阶段，我使用 php 从 mysql 数据库中填充了第一个选项。
我接下来要实现的目标如下：
通过从第一个预填充的 <select> 框中选择一个值 - 第二个 <select> 框将根据在第一个 <select> 框中选择的选项填充数据库表中的相关数据。
因此，如下图所示，如果我从第一个 <select> 框中选择一个位置，那么第二个 <select> 框中将填充该位置的所有套房。
我的数据库已经准备好所有数据并设置了关系。我已经在数据库端测试了我的 SQL 查询并且它们可以工作。现在我需要将它们全部放入一个 PHP 脚本中，该脚本将通过表单中的 AJAX 调用来调用。
到目前为止，我所做的是尝试将 $.ajax 请求从该表单发送到名为 jQueryHelper.php 的 PHP 脚本，然后该脚本应返回套件，我将在开始时使用 alert()。
jQueryHelper.php：
<?php
define("DB_HOST", "127.0.0.1");
define("DB_NAME", "mydb");
define("DB_USER", "root");
define("DB_PASS", "**********");
class jQueryHelper
private static $initialized = false;
private $db_connection = null;
private static function initialize()
if (self::$initialized)
return;
$this->db_connection = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
self::$initialized = true;
public static function giveData()
self::initialize();
if (!$this->db_connection->set_charset("utf8"))
$this->errors[] = $this->db_connection->error;
if (!$this->db_connection->connect_errno)
if(isset($_POST['action']) && !empty($_POST['action']))
$action = $_POST['action'];
$theSelectedLocationId = $_POST['id'];
switch($action)
case 'getAssignedSuites':
$this->getAssignedSuites($theSelectedLocationId);
break;
public static function getAssignedSuites($theSelectedLocationId)
$sql =<<<EOF
SELECT * FROM suites
WHERE location_id = $theSelectedLocationId
EOF;
$query_get_assigned_suites = $this->db_connection->query($sql);
$rows = array();
while($r = mysqli_fetch_assoc($query_get_assigned_suites))
$rows[] = $r;
echo json_encode($rows);
// Call it!
jQueryHelper::giveData();
?>
html 表单：
<form method="post" action="user_todays_locations.php" name="updatetodayslocation" role="form">
<div class="form-group">
<label for="suite_location" class="sr-only">Assigned Locations</label>
<select size="1" name="suite_location" class="form-control input-lg" required>
<option value="" selected="selected" disabled>Assigned Locations</option>
<?php $location->getAssignedLocations($login->getCurrentUserID()); ?>
</select>
</div>
<!-- more divs and form controls here -->
</form>
jQuery的$.ajax（位于<body>上方<form>）：
<script>
// grab ID of selected location
$(function()
$("select[name=suite_location]").change(function()
var theSelectedLocationId = this.value;
//alert(theSelectedLocationId);
$.ajax( url: '/classes/jQueryHelper.php',
data: action: 'getAssignedSuites', id: theSelectedLocationId,
type: 'post',
success: function(output)
alert(output);
,
error: function(jqXHR, textStatus, errorThrown)
if (jqXHR.status === 0)
alert('Not connect.\n Verify Network.');
else if (jqXHR.status == 404)
alert('Requested page not found. [404]');
else if (jqXHR.status == 500)
alert('Internal Server Error [500].');
else if (exception === 'parsererror')
alert('Requested JSON parse failed.');
else if (exception === 'timeout')
alert('Time out error.');
else if (exception === 'abort')
alert('Ajax request aborted.');
else
alert('Uncaught Error.\n' + jqXHR.responseText);
);
);
</script>
jQuery 的 <select> .change 事件触发没有问题，我收到一个带有所选选项值的警报（在我的情况下，它是数据库中位置的 ID）。 $.ajax 部分嵌套更深，不想工作。
整个网站都存储在 LAMP 服务器上。整个网站在里面：/mywebsites/project/www/
该表单位于views 文件夹中，该文件夹与其他视图一起包含在根级别的脚本中以显示完整页面。 jQueryHelper.php 在 classes 文件夹内。
我不知道，也许有更简单的方法来做到这一点。
【问题讨论】：
看起来getAssignedSuites() 只是做了一个return json_encode($rows);。你没有回声或打印。可能是echo jQueryHelper::giveData();？
@Sean 将其更改为 echo。还是没有骰子。
我还添加了error 事件和success 来测试它，事实上，每当我为第一个<select> 框调用change 事件时，我都会不断触发error 事件。跨度>
我进一步更新了错误事件。每当我触发它时，我都会看到Requested page not found. [404] 警报框。
如果您收到404，那么您需要检查您的浏览器控制台以查看您的$.ajax() 调用的网址。你在你的 LAMP 服务器上查看它，而不仅仅是本地文件，对吗？
【参考方案1】：
AJAX 调用找不到 jQueryHelper.php。
将 url 从 /classes/jQueryHelper.php 更改为 classes/jQueryHelper.php 修复了路径问题。
【讨论】：
【参考方案2】：在你的 switch 块中，你不应该返回从getAssignedSuites 调用返回的结果吗？
switch($action)
case 'getAssignedSuites':
return $this->getAssignedSuites($theSelectedLocationId);
break;
然后按照@sean 的建议。 echo jQueryHelper::giveData();
还有。我认为在类函数中调用$_POST 不是一个好习惯。我建议将它们作为jQueryHelper::giveData($_POST['action'], $_POST['id']) 之类的参数传递，然后使用它。
【讨论】：
我不这么认为。当我$this->getAssignedSuites($theSelectedLocationId); 执行 getAssignedSuites() 时，它又返回/回显结果。无论如何，我也尝试过，但我仍然收到显示Requested page not found. [404] 的 AJAX 错误。请参阅更新的 <script> 以了解改进的错误事件。
嗯。让我们先解决这个问题。您的 view.php 和 jQueryHelper.php 是否在不同的文件夹中，这就是您将 url 路径指定为“/classes/jQueryHelper.php”的原因吗？因为，'/~path' 是从根目录调用文件路径。以上是关于使用 AJAX、PHP 和 MySQL 链式填充 HTML 选择框的主要内容，如果未能解决你的问题，请参考以下文章
jQuery 使用 jQuery ajax json、php 将项目填充到 Select 中
jquery - 如何使用通过 AJAX 从 MySQL 和 PHP 检索的数据将图像添加到 Select2 下拉列表？