如何使用 AJAX 在我的 HTML 页面中显示我的 PHP 页面的输出？

Question

我想将我的 PHP 文件中的回显文本显示为我的主 html 页面 (main.php) 中的“p”文本

我连接到数据库以检索我想要的数据，并且在那个 PHP 页面中，我目前让它根据数据库中可用的数据来回显文本。

现在，在我的 main.php 页面中，我有一个名为“搜索”的按钮，它将我重定向到另一个可用性.php 页面，该页面显示一条回显消息，告诉我我的结果。我希望该消息显示在我的主页中而不刷新页面。

以下是我的 PHP 文件。

<?php
session_start();
include "php/db.php";

/////////////////////////////////////////////////////

$checkin = $_POST['checkin'];
$checkout = $_POST['checkout'];

$date1=date_create("$checkin");
$date2=date_create("$checkout");
$diff=date_diff($date1,$date2) ->format ("%a");
$nightsStaying = (int) ("$diff");

////////////////////////////////////////////////////

$peopleString = $_POST['people'];
$people = (int) "$peopleString"; //converts people string to int

//////////////////////////////////////////////////// 


if ($people > 1){
    $results = $db->query("SELECT * FROM availability WHERE date >= '$checkin' AND date < '$checkout' AND (droom > 0 OR suite > 0) ")->fetchALL(PDO::FETCH_ASSOC); 
    // Checks if a double room or suite are available on the days requested
    $resultsCount = count($results); //checks how many rows are retrieved
    
    if ($resultsCount == $nightsStaying){
        echo "There are available rooms";
    }else{
        echo "There is no availability for the selected dates";
    }
}
else {
    $results = $db->query("SELECT * FROM availability WHERE date >= '$checkin' AND date < '$checkout' AND (sroom > 0 OR droom > 0 OR suite > 0) ")->fetchALL(PDO::FETCH_ASSOC); 
    // CHECK FOR ANY ROOM IS GREATER THAN 0.
    $resultsCount = count($results);
    
    if ($resultsCount == $nightsStaying){
        echo "There are available rooms";
    }else{
        echo "There is no availability for the selected dates";
    }
}
?>

HTML 部分：

<form  id="availabilitySearch" action="availability.php" method="post">
    
<div class="d-flex justify-content-center container">

    <div class="col m2">

        <label><i class="fa fa-calendar-o"></i> Check In</label>

        <input id="checkin" class="input border" name="checkin" type="date">
    </div>

    <div class="col m2">

        <label><i class="fa fa-calendar-o"></i> Check Out</label>

        <input id="checkout" class="input border" name="checkout" type="date">
    </div>

    <div class="col m2">

        <label><i class="fa fa-male"></i> People</label>

        <input id="people" class="input border" name="people" type="number" placeholder="1">
    </div>

    <div class="col m2">

        <label><i class="fa fa-search"></i> Search</label>

        <button type="submit" class="button block black">Search</button>
    </div>
</div>
</form>

<div>
    <!-- THIS IS WHERE I WANT THE AJAX SCRIPT TO SHOW THE RESULT-->
    <p></p>
</div>

Answer 1

1. 在main.php中置顶添加jquery（如果你之前没有插过的话）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

1. 在此处添加 id

<div>
    <!-- THIS IS WHERE I WANT THE AJAX SCRIPT TO SHOW THE RESULT-->
    <p id="message"></p>
</div>

1. 在main.php的底部添加

<script>
$("#availabilitySearch").on("submit", function(){
    event.preventDefault();
    $.ajax({
        url: 'availability.php',
        method: 'post',
        dataType: 'html',
        data: $(this).serialize(),
        success: function(data){
            $('#message').html(data);
        }
    });
}); 
</script>

---

最终的 main.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<form  id="availabilitySearch" action="availability.php method="post">  <!-- remove action="availability.php " -->
    
<div class="d-flex justify-content-center container">

    <div class="col m2">

        <label><i class="fa fa-calendar-o"></i> Check In</label>

        <input id="checkin" class="input border" name="checkin" type="date">
    </div>

    <div class="col m2">

        <label><i class="fa fa-calendar-o"></i> Check Out</label>

        <input id="checkout" class="input border" name="checkout" type="date">
    </div>

    <div class="col m2">

        <label><i class="fa fa-male"></i> People</label>

        <input id="people" class="input border" name="people" type="number" placeholder="1">
    </div>

    <div class="col m2">

        <label><i class="fa fa-search"></i> Search</label>

        <button type="submit" class="button block black">Search</button>
    </div>
</div>
</form>

<div>
    <!-- THIS IS WHERE I WANT THE AJAX SCRIPT TO SHOW THE RESULT-->
    <p id="message"></p>
</div>


<script>
$("#availabilitySearch").on("submit", function(){
    event.preventDefault();
    $.ajax({
        url: 'availability.php',
        method: 'post',
        dataType: 'html',
        data: $(this).serialize(),
        success: function(data){
            $('#message').html(data);
        }
    });
}); 
</script>