[英]Replace div contents with content from PHP file
這是包含新內容的php文件,用於在提交表單時替換.hotels。
<?php
if(isset($_POST['submit'])){
$pdo = new PDO('mysql:host=localhost;dbname=CSV_DB', 'root', 'root');
$inputType = $_POST['type'];
$inputCategory = $_POST['category'];
$type = $pdo->query("SELECT * FROM Hotels WHERE Type LIKE '%$inputType%' AND Price_Range= '$inputCategory'");
foreach($type as $row){
echo"<div id='newHotels'>";
echo "<div class='hotelImage'></div>";
echo'<h4>'.$row['Hotel_Name']." ".$row['Rating']."*".'</h4>'." ".'<p>'.$row['Description'].'</p>'." "."Location: ".$row['Location']." ".'<h4 style="font-weight: bold">'."£".$row['Price']."p/p".'</h4>';
echo "</div>";}
}
?>
這是原始div,它在頁面加載時顯示數據庫中的所有酒店,並且在提交表單時我想用新內容替換:
<div id="hotels">
<?php
$pdo = new PDO('mysql:host=localhost;dbname=CSV_DB', 'root', 'root');
$display = $pdo->query('SELECT Hotel_Name, Description, Location, Rating, Price FROM Hotels');
foreach ($display as $row){
if($row)
echo"<div id='hotel'>";
echo "<div class='hotelImage'></div>";
echo'<h4>'.$row['Hotel_Name']." ".$row['Rating']."*".'</h4>'." ".'<p>'.$row['Description'].'</p>'." "."Location: ".$row['Location']." ".'<h4 style="font-weight: bold">'."£".$row['Price']."p/p".'</h4>';
echo "</div>";}
?>
</div>
以下是應該更改內容的Ajax
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'form.php',
data: $('form').serialize(),
success: function(data) {
$(".hotels").html(data);
}
});
});
});
當表單提交時,我需要幫助將.hotels
的內容替換為我的表單的搜索結果但是div
才變空。 我認為我需要使數據與搜索結果相同但不確定如何進行。
提交控制台日志表示數據未定義。
您需要在success函數中定義數據。
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'form.php',
data: $('form').serialize(),
success: function(data) { /* you missed variable data here */
$("#hotel").html(data);
}
});
});
});
沒有定義“數據”的控制台日志意味着沒有名為“data”的變量。 要解決此問題,您可以創建一個名為“data”的全局變量,或者將“data”作為參數傳遞給success函數。 這看起來有點像這樣:
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'form.php',
data: $('form').serialize(),
success: function(data) {
$("#hotel").html(data);
}
});
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.