2017-03-18 135 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); 
       } 
      }); 

     }); 

    });