【发布时间】：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 服务器上查看它，而不仅仅是本地文件，对吗？
标签： php jquery mysql ajax drop-down-menu