2017-03-18 187 views
3

這是包含新內容的php文件,用於在提交表單時替換.hotels。用PHP文件中的內容替換div內容

<?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); 
        } 
       }); 

      }); 

     }); 
阿賈克斯

我需要幫助我完成表格的搜索結果更換的.hotels內容時表單提交如何有史以來div只是變空了。我想我需要使數據與搜索結果相同,但不知道如何去做。

回答

2

提交控制檯日誌表示數據未定義。

您需要在成功函數中定義數據。

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

    }); 

}); 
+0

好的謝謝,數據現在已定義,但仍然沒有結果。我檢查了網絡日誌,併發布了表單參數,但仍未顯示新數據。有任何想法嗎? –

0

控制檯日誌說「數據」未定義意味着沒有名爲「數據」的變量。要解決這個問題,你可以創建一個名爲「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); 
       } 
      }); 

     }); 

    });