HTML/AJAXからPHP/SQLの結果を出力するには

Question

.phpファイルを直接呼び出すとうまくいくので、エラーはAJAXの結果をどのように表示しているかと思います。私はAJAXを初めて使っています。ユーザーが検索する日付を選択できるフォームがあり、返されたときに結果が表示されます。

$("#searchForm").on("submit", function (event) { 
    event.preventDefault(); 

    $.ajax({ 
     type: "POST", 
     url: "searchnow.php", 
     data: $('#searchForm').serialize(), 
     success : function (output) { 
      console.log(output); 
     } 
    }); 
}); 


searchnow.php 
<div id="output"> 
    <div class="container-fluid"> 
    <div class='features'> 
     <?php 
     include ("config.php"); 
     $con = mysql_connect($server, $user, $password) or die('Sorry, could not connect to database server'); 
     mysql_select_db($database, $con) or die('Sorry, could not connect to database'); 

     $query = "SELECT * FROM hsevents WHERE 
      CURDATE()<=enddate AND 
      verified='Y' 
      ORDER BY location"; 

     $result = mysql_query($query) or die('Sorry, could not access the database at this time '); 
     $SPACES = "</br><b>Description:</b>&nbsp;"; 

     if (mysql_num_rows($result) == 0) 
     { 
      echo "<h3>Sorry, there are no classes or events that meet your criteria.</h3>"; 
     } 
     else 
     { 
      $i = 1; 
      while($row=mysql_fetch_array($result, MYSQL_ASSOC)) 
      { 
       $unique = 'unique' . $i; 
       $tempname=htmlentities($row[name]); 
       $tempcontact=htmlentities($row[contact]);     
       $tempbegdate = date("m-d-Y", strtotime($row[startdate])); 
       $tempenddate = date("m-d-Y", strtotime($row[enddate])); 


       ob_start(); 
       if (($i%4) === 0) { 
        echo "<div class='row row-padded row-bordered row-centered'>"; 
       } 

       echo " 
       <div class='col-md-3'> 
        <div class='panel'> 
         <div class='panel-heading'> 
          <img src='images/$row[category]' class='img-responsive img-thumbnail img-hsb'> 
         </div> 
         <div class='panel-body text-center'> 
          $tempname</br> 
          Start Date: $tempbegdate</br> 
          End Date: $tempenddate</br> 
          Location: $row[location]</br> 
          Age Range: $row[lowerage] - $row[upperage]</br> 
          Contact: <a href=$tempcontact>$tempcontact</a></br> 
          <div id='$unique' class='collapse collapse-hsb'> 
           $tempdescription 
          </div> 
         </div> 
        </div>       
       </div> 
       "; 

       if (($i%4) === 0) { 
        echo "</div>"; 
       } 

       $classdata = ob_get_contents(); 
       ob_end_clean(); 
       ?> 
       <?php echo $classdata ?> 
       <?php 
        $i++; 
      } 

      $classdata = ob_get_contents(); 
      ob_end_clean(); 
      echo $classdata; 
     } 
     ?> 

    </div> 
</div> 
</div> 

Answer 1

は、あなただけのAJAX成功出力とDIVまたはセレクタ HTMLを置き換えるために、DIVや成功の関数内の任意セレクタを提供する必要があります。ここでは、＃MyDivIdを使用しました。これは、AJAX出力を印刷するhtml要素にする必要があります。

$("#searchForm").on("submit", function (event) { 
    event.preventDefault(); 

$.ajax({ 
    type: "POST", 
    url: "searchnow.php", 
    data: $('#searchForm').serialize(), 
    success : function (output) { 
     output = output.trim(); // Trim's unwanted white space around the output 
     if (output != "") { 
      $("#MyDivId").html(output); // This Adds the AJAX output inside #MyDivId 
     } 
    } 
}); 

}）;