divの内容をPHPファイルのコンテンツに置き換えます。

Question

これは、フォームの送信時に.hotelsを置き換える新しいコンテンツを含むPHPファイルです。ここで

<?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> 

そしてここにはありますコンテンツ

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

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

      }); 

     }); 

を変更することになっているのAjax 私は、フォームがどのように送信したときに私のフォームの検索結果を .hotelsの内容を置き換える助けが必要

今までdivは空になります。私はデータを検索結果と同じにする必要があると思うが、どうやってそれをどうやって行くのかはわからない。

Answer 1

送信されたコンソールログには、データが定義されていないと記載されています。

成功関数でデータを定義する必要があります。

$(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); 
      } 
     }); 

    }); 

}); 

Answer 2

「データ」が定義されていないコンソールログは、「データ」という名前の変数がないことを意味します。この問題を解決するには、 "data"というグローバル変数を作成するか、success関数の引数として "data"を渡すことができます。これは次のようになります。