带有PHP函数的自适应下拉菜单从MySQL服务器填充
Adaptive Drop Down Menu with PHP functions Populating from a MySQL server
我有三个下拉菜单,我一直试图使它们相互依赖,这样,一旦在第一个下拉菜单中进行了选择,第二个下拉菜单的选项就会改变。然后,一旦在第二个下拉菜单中进行了选择,第三个下拉菜单将发生变化。我的HTML如下所示:
<select class = "homepageSelectors , hpSelectorMenu" id = "classSelector" name="classSelector" >
<option selected="selected">Select</option>
<option value= "geometry">Geometry</option>
<option value= "english1">English 1</option>
<option value= "algebra2">Algebra 2</option>
</select>
<select class = "homepageSelectors , hpSelectorMenu" id = "levelSelector" name="levelSelector">
</select>
<select class = "homepageSelectors , hpSelectorMenu" id = "teacherSelector" name="teacherSelector">
</select>
第一个下拉菜单是硬编码的,因为选项不会更改。不过,我需要做的是,当第一个菜单更改时,运行一个PHP函数来查询SQL数据库,并获得第二个下拉菜单的选项。我在另一个文件中有以下jquery代码,该文件在第一个下拉列表更改时运行一个函数。
$("#classSelector").change( function () {
//In here is where I need to run a PHP function
});
我意识到,我可以在jquery函数中调用一个外部PHP文件,尽管我的问题是,一旦我从该外部PHP文件查询SQL server,我就无法将查询结果返回到HTML文件,以便填充第二个下拉菜单。
我一直在寻找其他论坛,试图找到一个解决方案,尽管我找不到任何类似于我的场景的帖子。我对ajax不太熟悉,但如果你认为这是实现它的方法,请解释一下。谢谢你的帮助!!!
您需要使用jQuery Ajax
向.php文件发出请求,以便获得所需的数据。一个简单的例子让你有一个想法:
您的javascript函数文件:
$("#classSelector").change( function () {
//In here is where I need to run a PHP function
var value = $(this).val();
// load data if value is different than 'selected'
if(value != 'selected') {
$.ajax({
url: 'your_file.php',
data: {classID: $(this).val()},
dataType: 'html',
type: "GET",
success: function(data) {
// drop the output in #levelSelector select
$('select#levelSelector').html(data);
}
});
}
});
这可以转换为类似your_file.php的文件吗?classID=几何体,例如:
您的php文件:
<?php
// This is an example your php script should output what you need
// and how you need even if loading data from SQL Server / MySQL etc...
$classID = (isset($_GET['classID'])) ? $_GET['classID'] : null;
switch($classID)
{
case 'Geometry':
echo "<option value='level1'>Level 1</option>";
break;
default:
break;
}
// Output
<option value='level1'>Level 1</option>
输出将在"#levelSelector"选择中,如下所示:
<select class = "homepageSelectors , hpSelectorMenu" id = "levelSelector" name="levelSelector">
<option value='level1'>Level 1</option>
</select>
所以,我认为您真正想要的是:如何使用JavaScript和PHP实时查询数据库?
这有两部分。JavaScript脚本和PHP脚本。JavaScript将对PHP脚本进行AJAX调用,然后PHP脚本将查询数据库,并将查询结果返回给发出初始请求的JavaScript。
您似乎已经在使用jQuery了,所以这很好,因为jQuery有一个非常有用的功能来进行网络呼叫:$.ajax()
将您已经拥有的代码进行扩展:
$("#classSelector").change( function () {
var selectedClass = $(this).find(":selected").text();
$.ajax({
url: '/path/to/class/select/php/script.php',
data: {selectedValue: selectedClass}, // Send this data to the PHP script
dataType: 'json', // Let's assume the PHP script will send us a JSON response
success: function(data) { // Gets called if the entire request is successful
console.log('Server returned level options for class ' + selectedClass, data);
// data now contains the array of options for levelSelector.
// I'm going to assume you know how to loop through them and populate levelSelector
}
});
});
对于levelSelector
,我们需要完全相同的代码,只需更改两件小事:
$("#levelSelector").change( function () {
var selectedLevel = $(this).find(":selected").text();
$.ajax({
url: '/path/to/level/select/php/script.php',
data: {selectedValue: selectedLevel}, // Send this data to the PHP script
dataType: 'json', // Let's assume the PHP script will send us a JSON response
success: function(data) { // Gets called if the entire request is successful
console.log('Server returned teacher options for class ' + $("#classSelector").find(":selected").text() + 'and level ' + selectedLevel, data);
// data now contains the array of options for teacherSelector.
// I'm going to assume you know how to loop through them and populate teacherSelector
}
});
});
酷。现在,让我们设置一个PHP脚本。我假设您使用的是MySQL数据库,在这个例子中,我不会包含任何需要用于清理和保护脚本的代码(您可以在SO上的其他问题中找到这一点)。大部分PHP脚本是从W3Schools直接复制/粘贴的。
<?php
header('Content-Type: application/json'); // We are going to send a JSON response
// Server connection info
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
$selectedValue = $_REQUEST['selectedValue'];
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM levels WHERE class = " . $selectedValue; // THIS IS AN EXAMPLE. IN PRODUCTION, ALWAYS CLEAN USER INPUT FIRST.
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
$results = array();
while($row = $result->fetch_assoc()) {
$results[] = $row;
}
echo json_encode($results);
} else {
echo json_encode("0 results");
}
$conn->close();
- 将数据从本地SQL Server同步到Internet上的MySQL Server(实时服务器)
- 实时接收来自服务器的消息(数据库-MySQL,前端-Angularjs)
- 我需要一个注册按钮,它可以将数据发送到mySQL服务器,也可以在单击时重定向
- 为什么我的 php 连接到 mysql 服务器不起作用
- 如何在 Apache-PHP-MySQL 机器上实现“服务器推送”
- 无法使用我的Phonegap应用程序连接到mysql服务器
- 在服务器端(PHP / MySQL)或客户端(js)排序
- 如果网站刷新,则阻止 php 调用的 mysql 服务器运行
- PHP JavaScript 从 MySQL 获取数据在服务器端出现 500 错误
- 我如何通过方法写入数据 response.write 从 MySQL 服务器到 Node.js 程序后
- 带有PHP函数的自适应下拉菜单从MySQL服务器填充
- 在javascript服务器端连接MySQL,不需要node.js
- 我需要帮助在不使用表单的情况下使用Ajax、PHP和mySQL将信息发送到服务器
- 使用Ajax和服务器MySQL在Phonegap中开发登录页面
- 当新行从应用程序插入到mysql表时,监听来自节点服务器js的事件
- 寻找Javascript日历,将嵌入在一个网页,并从PHP/MySQL服务器获取数据
- 从外部服务器用Javascript连接到PHP MySQL
- 我如何使用javascript将文件分成几个部分,并将这些细节插入外部服务器上的Mysql数据库
- 使用backbone.js和其他服务器脚本语言在mysql中存储数据
- 如何使用javascript实时预览保存为Longblob数据在MySQL服务器中的PDF文件