用 PHP 文件中的内容替换 div 内容答案

【问题标题】：Replace div contents with content from PHP file用 PHP 文件中的内容替换 div 内容
【发布时间】：2017-08-10 01:00:57
【问题描述】：

这是包含新内容的 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 只是变成空的。我想我需要使数据等于搜索结果，但不知道如何去做。

【问题讨论】：

标签： php html ajax pdo form-submit

【解决方案1】：

提交控制台日志说数据未定义。

需要在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);
           }
       });

   });

 });

【讨论】：

好的，谢谢，现在定义了数据，但仍然没有结果。我检查了网络日志，它正在发布表单参数，但仍未显示新数据。有什么想法吗？

【解决方案2】：

控制台日志说“数据”未定义意味着没有名为“数据”的变量。要解决这个问题，您可以创建一个名为“data”的全局变量，或者将“data”作为参数传递给成功函数。这看起来有点像这样：

$(function () {
        $('form').on('submit', function (e) {
        e.preventDefault();

        $.ajax({
           type: 'post',
           url: 'form.php',
           data: $('form').serialize(),
           success: function(data) {
               $("#hotel").html(data);
               }
           });

       });

   });

【讨论】：