Wie gebe ich PHP/SQL-Ergebnisse aus HTML/AJAX aus

Question

Wenn ich die .php-Datei direkt aufrufen, funktioniert es großartig, so glaube ich, der Fehler ist in, wie ich das AJAX-Ergebnis anzeigen. Ich bin neu in AJAX. Ich habe ein Formular, dass der Benutzer Daten suchen kann, um zu suchen, usw. und ich möchte Ergebnisse angezeigt werden, wenn sie zurückgegeben werden.

$("#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

Sie müssen nur die DIV oder jeden Selector zur Verfügung zu stellen in der Erfolgsfunktion, den DIV oder Wähler html mit der AJAX Erfolg Ausgabe zu ersetzen. Hier habe ich #MyDivId verwendet, das Ihr HTML-Element sein sollte, in dem Sie den AJAX-Ausgang drucken müssen.

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

});