基于其他下拉列表的 ajax 和 jQuery 动态下拉列表（来自数据库的数据）
Posted
技术标签:
【中文标题】基于其他下拉列表的 ajax 和 jQuery 动态下拉列表（来自数据库的数据）【英文标题】：ajax and jQuery dynamic dropdown based on other dropdown (data from Database) 【发布时间】：2021-04-16 00:04:39 【问题描述】：我正在使用连接到数据库的表单的网站上工作，用户应该能够根据电影（从数据库收集的数据）选择电影的日期。
我还想在提交表单后向用户显示一条消息，它的代码在此页面末尾被注释掉，它工作但由于某种原因在显示消息后表单没有提交给数据库不再正常工作，如果没有它正常工作，我如何在提交表单后立即显示消息？
我尝试了很多不同的方法，而且我是 ajax 新手，下面是代码：
索引页面：
<!DOCTYPE html>
<html lang="en">
<head>
<script>
$(document).ready(function()
$('#movies').on('change',function()
var movieID = $(this).val();
if(movieID)
$.ajax(
type:'POST',
url:'ajaxData.php',
data:'movieID'+movieID,
success:function(html)
$('#date').html(html);
);
else
$('#date').html('<option value="">Select date/time</option>');
);
);
</script>
<?php
require_once("php/connection.php");
$query = "SELECT title FROM movie";
$result1 = mysqli_query($conn,$query);
?>
<script>
function validateForm()
var x = document.forms["form"]["fname"].value;
if (x == "")
alert("Name must be filled out");
return false;
</script>
<meta charset="utf-8">
<title>Bollywood movies | Tickets</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/Style.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<h1>Bollywood movies</h1>
<section class="banner">
<img src="images/third-serving-nLl5sJnElxY-unsplash.jpg" >
</section>
<nav id="navbar">
<ul>
<li><a href="">Home</a> </li>
<li> <a href="">Bookings</a> </li>
<li> <a href="">Coming soon..</a> </li>
</ul>
</nav>
<h2>You can book your tickets here!</h2>
<form action="php/action.php" method="post" onsubmit="return validateForm()" id="form">
<div id="first">
<label for="fname">First Name</label><br>
<input type="text" id="fname" name="fname" ><br>
</div>
<div id="last">
<label for="lname">Last Name</label><br>
<input type="text" id="lname" name="lname" required><br>
</div>
<div id="Email">
<label for="email">Email</label><br>
<input type="email" id="email" name="email" required><br>
</div>
<div id="mobile">
<label for="Mobile_Number">Mobile Number</label><br>
<input type="text" id="Mobile_Number" name="Mobile_Number" required><br>
</div>
<div id="card">
<label for="Credit_card">Credit card number</label><br>
<input type="tel" id="Credit_card" name="credit" ><br>
</div>
<div id="Movies">
<label for="movies">Movie selection</label><br>
<select name="movies" id="movies">
<option selected="" disabled="">Select movie</option>
<?php
while($row = mysqli_fetch_array($result1)):; ?>
<option value=" <?php echo $row[0]; ?>"><?php echo $row[0];?></option>
<?php endwhile;
?>
</select> <br>
</div>
<div id="Date">
<label for="date">Session date/time</label><br>
<select name="date" id="date" >
<option value="">Select date/time</option>
</div>
<br>
<br>
<hr>
<div id="submit">
<input type="submit" value="Submit">
<input type="reset">
</div>
<br>
<div id="yes"> </div>
</form>
<script>
$("#fname").change(function()
if ($(this).val() .length == 0)
$('#last').hide();
else
$('#last').show();
);
$("#fname").trigger("change");
$("#lname").change(function()
if ($(this).val() .length == 0)
$('#Email').hide();
else
$('#Email').show();
);
$("#lname").trigger("change");
$("#email").change(function()
if ($(this).val() .length == 0)
$('#mobile').hide();
else
$('#mobile').show();
);
$("#email").trigger("change");
$("#Mobile_Number").change(function()
if ($(this).val() .length == 0)
$('#card').hide();
else
$('#card').show();
);
$("#Mobile_Number").trigger("change");
$("#Credit_card").change(function()
if ($(this).val() .length == 0)
$('#Movies').hide();
else
$('#Movies').show();
);
$("#Credit_card").trigger("change");
$("#movies").change(function()
if ($(this).val() .length == 0)
$('#Date').hide();
else
$('#Date').show();
);
$("#movies").trigger("change");
</script>
<!-- <script>
var name= $('#fname').val() ;
var lname= $('#lname').val() ;
$('#form').submit(function()
$('#yes').text("Thank you for your booking, " + $( '#fname' ).val() + " " + $('#lname').val() );
return false;
);
</script> -->
</html>
ajax 页面：
<?php
include_once 'php/connection.php';
if(!empty($_POST["movieID"]))
$query = "SELECT sessionDate FROM sessions WHERE movieID = ".$_POST['movieID']." " ;
$result = $db->query($query);
if($result->num_rows > 0)
echo '<option value="">Select date/time</option>';
while($row = $result->fetch_assoc())
echo'<option value="'.$row['movieID'].'">'.row['sessionDate'].'</option>';
else
echo '<option value="">Date not available</option>';
?>
连接页面：
<?php
// Set the values for the variables
$servername = "localhost";
$username = "root";
$password = "";
$database = "bollywood_movies";
// Connect to the mySQL database
$conn = @mysqli_connect($servername, $username, $password, $database);
// Check for valid connection. If there are errors display a error message and error details
if (!$conn)
echo "Error: Unable to connect to MySQL." . PHP_EOL;
echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL; // Display the MySQL error number
echo "Debugging error: " . mysqli_connect_error() . PHP_EOL; // Display the MySQL error details
exit;
?>
动作页面：
<?php
// MySQL Database Connect
require_once("connection.php");
// Read the values from the form
$first_name = $_POST['fname'];
$last_name = $_POST['lname'];
$email = $_POST['email'];
$mobile = $_POST['Mobile_Number'];
$movieID = $POST['movies'];
$sessionDate = $_POST['date'];
// escape variables for security
$first_name = mysqli_real_escape_string($conn, $first_name);
$last_name = mysqli_real_escape_string($conn, $last_name);
$email = mysqli_real_escape_string($conn, $email);
$mobile = mysqli_real_escape_string($conn, $mobile);
$movieID = mysqli_real_escape_string($conn, $movieID);
$sessionDate = mysqli_real_escape_string($conn, $sessionDate);
// create the INSERT query
$query="INSERT INTO patron (first_name, last_name, email, mobile) VALUES ('$first_name', '$last_name','$email', '$mobile' )";
$results = mysqli_query($conn, $query );
if(!$results)
echo ("Query error: " . mysqli_error($conn));
exit;
else
// Redirect the browser window back to the add customer page
header("location: ../index.php");
?>
数据库数据：
--
-- Table structure for table `booking`
--
CREATE TABLE `booking` (
`bookingID` int(11) NOT NULL,
`patronID` int(11) NOT NULL,
`sessionID` int(11) NOT NULL,
`paid` tinyint(1) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Table structure for table `movie`
--
CREATE TABLE `movie` (
`movieID` int(11) NOT NULL,
`title` varchar(100) NOT NULL,
`description` text NOT NULL,
`year` int(4) NOT NULL,
`active` tinyint(1) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data for table `movie`
--
INSERT INTO `movie` (`movieID`, `title`, `description`, `year`, `active`) VALUES
(1, 'The Godfather', 'Gangsters movie with plenty of suspance', 1972, 1),
(2, 'Raging Bull', 'The story of a bull that was raging', 1980, 1),
(3, 'Schindlers list', 'history movie about the war', 1993, 1),
(4, 'The Shawshank Redemption', 'The redemption of the shanks', 1994, 1),
(5, 'Casablanca', 'Crime and action', 1942, 1);
--
-- Table structure for table `patron`
--
CREATE TABLE `patron` (
`patronID` int(11) NOT NULL,
`first_name` varchar(200) NOT NULL,
`last_name` varchar(200) NOT NULL,
`email` varchar(100) NOT NULL,
`mobile` varchar(20) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Table structure for table `sessions`
--
CREATE TABLE `sessions` (
`sessionID` int(11) NOT NULL,
`movieID` int(11) NOT NULL,
`sessionDate` datetime DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data for table `sessions`
--
INSERT INTO `sessions` (`sessionID`, `movieID`, `sessionDate`) VALUES
(1, 1, '2020-12-23 18:51:33'),
(2, 2, '2020-12-16 10:25:33'),
(3, 3, '2020-12-31 09:51:33'),
(4, 4, '2020-12-29 11:51:33'),
(5, 5, '2020-12-17 22:51:33');
转储表的索引
--
-- Indexes for table `booking`
--
ALTER TABLE `booking`
ADD PRIMARY KEY (`bookingID`),
ADD KEY `patronID` (`patronID`),
ADD KEY `sessionID` (`sessionID`);
--
-- Indexes for table `movie`
--
ALTER TABLE `movie`
ADD PRIMARY KEY (`movieID`);
--
-- Indexes for table `patron`
--
ALTER TABLE `patron`
ADD PRIMARY KEY (`patronID`);
--
-- Indexes for table `sessions`
--
ALTER TABLE `sessions`
ADD PRIMARY KEY (`sessionID`),
ADD KEY `movieID` (`movieID`);
转储表的AUTO_INCREMENT
--
-- AUTO_INCREMENT for table `booking`
--
ALTER TABLE `booking`
MODIFY `bookingID` int(11) NOT NULL AUTO_INCREMENT;
--
-- AUTO_INCREMENT for table `movie`
--
ALTER TABLE `movie`
MODIFY `movieID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
--
-- AUTO_INCREMENT for table `patron`
--
ALTER TABLE `patron`
MODIFY `patronID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=34;
--
-- AUTO_INCREMENT for table `sessions`
--
ALTER TABLE `sessions`
MODIFY `sessionID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
转储表的约束
--
-- Constraints for table `booking`
--
ALTER TABLE `booking`
ADD CONSTRAINT `booking_ibfk_1` FOREIGN KEY (`patronID`) REFERENCES `patron` (`patronID`),
ADD CONSTRAINT `booking_ibfk_2` FOREIGN KEY (`sessionID`) REFERENCES `sessions` (`sessionID`);
--
-- Constraints for table `sessions`
--
ALTER TABLE `sessions`
ADD CONSTRAINT `sessions_ibfk_1` FOREIGN KEY (`movieID`) REFERENCES `movie` (`movieID`);
COMMIT;
非常感谢您提前提供的帮助，我希望我能够解决这个问题，因为我一直在努力解决这个问题。
【问题讨论】：
只是为了添加更多信息，电影下拉列表可以正常工作，我一直在尝试通过 jQuery 使用 Ajax 根据电影选择填充日期会话下拉列表，但在这个阶段它不起作用但是我不确定自己做错了什么（也没有错误消息）。 【参考方案1】：如果我理解正确，您希望在提交表单之后而不是之前出现一条消息，因为让它出现在之前会阻止提交表单？如果您在提交表单后返回页面，您是否可以在标题中设置一个变量，以便 php 代码可以$_GET 变量并使用它来显示类似这样的消息
<?php if(isset($_GET['formsubmit']) && $_GET['formsubmit'] == 'pass')echo'$('#yes').text("Thank you for your booking, '.$_SEASSON['firstname'].' '.$_SEASSON['lastname']).'.';'?>
或者，如果您不想将名称设置为会话变量，则可能只需设置一个 parton_id 或其他内容，并进行查询以获取表单的相关信息。不确定这真的算作答案，但我没有足够好的声誉来发表评论。
【讨论】：
嗨，哈里森，感谢您的评论，我的主要目标是根据表单的电影下拉列表填充日期下拉列表，然后在表单提交后显示成功消息。以上是关于基于其他下拉列表的 ajax 和 jQuery 动态下拉列表（来自数据库的数据）的主要内容，如果未能解决你的问题，请参考以下文章
如何根据使用 jQuery/AJAX 和 PHP/MySQL 选择的第一个下拉列表填充第二个下拉列表？
jquery - 如何使用通过 AJAX 从 MySQL 和 PHP 检索的数据将图像添加到 Select2 下拉列表？