Laden Formularergebnis in eine geladene Datei

Question

Guten Morgen. Ich versuche, die Antwort von FORM POST in meiner Datei zu laden.

Das ist mein Index:

<div class="right-half"> 
    <div id="include"> 
</div> 
</div> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script type="text/javascript"> 
     $("#search").click(function(){ 
      $("#include").load("admin_search.php"); 
     }); 
     $("#add").click(function(){ 
      $("#include").load("include/test.html"); 
     }); 
     $('#user').submit(function() { // catch the form's submit event 
      $.ajax({ // create an AJAX call... 
       data: $(this).serialize(), // get the form data 
       type: $(this).attr('POST'), // GET or POST 
       url: $(this).attr('admin_user.php'), // the file to call 
       success: function(response) { // on success.. 
        $('#include').html(response); // update the DIV 
       } 
       }); 
      return false; // cancel original event to prevent form submitting 
     }); 
</script> 

Und das ist meine admin_search.php-Datei, die es nicht auf der Hand in Fall ist es von jQuery in meiner Indexdatei geladen:

<section> 
<div> 
    <header> 
     <h2>Buscar información de usuario</h2> 
    </header> 

    <p>Para buscar un usuario o su información relacionada, ingresa el correo electrónico con el que el usuario se identifica.</p> 

    <form id="user"> 
     <div class="row"> 
      <div> 
       <input type="text" name="email" id="email" placeholder="Correo electrónico"> 
      </div> 

      <div> 
       <input type="submit" name="submit" value="Buscar usuario"> 
      </div> 
     </div> 
    </form> 
</div> 

In der Theorie sollte ich das Ergebnis von admin_user.php in meinem #include DIV bekommen, aber ich bekomme nichts.

Kann mir jemand dazu einen Rat geben?

EDIT: Hier ist meine admin_user.php Datei

<?php 

require_once('admin_connect.php'); 
$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL); 
$query = $con->query("SELECT * FROM user_data WHERE email = '$email'"); 

echo(" 
<table cellspacing='0'> 
    <thead> 
     <tr> 
      <th></th> 
      <th>VALORES</th> 
     </tr> 
    </thead>"); 

while ($row = $query->fetch(PDO::FETCH_ASSOC)) { 

echo(" 
    <tbody> 
     <tr> 
      <td>Nombre</td> 
      <td>"); echo $row['name']; echo("</td> 
     </tr><!-- Table Row --> 
     <tr class='even'> 
      <td>Correo electrónico</td> 
      <td>"); echo $row['email']; echo("</td> 
     </tr><!-- Darker Table Row --> 
     <tr> 
      <td>Edad</td> 
      <td>"); echo $row['age']; echo("</td> 
     </tr> 
     <tr class='even'> 
      <td>Sexo</td> 
      <td>"); echo $row['gender']; echo("</td> 
     </tr> 
     <tr> 
      <td>Peso:</td> 
      <td>"); echo $row['weight']; echo("</td> 
     </tr> 
     <tr class='even'> 
      <td>Estatura</td> 
      <td>"); echo $row['height']; echo("</td> 
     </tr> 
     <tr> 
      <td>Problemas de salud</td> 
      <td>"); echo $row['health_problem']; echo("</td> 
     </tr> 
     <tr class='even'> 
      <td>Actividad física</td> 
      <td>"); echo $row['activity']; echo("</td> 
     </tr> 
     <tr> 
      <td>Alergias</td> 
      <td>"); echo $row['food_sick']; echo("</td> 
     </tr> 
     </tbody> 
    </table>"); 
} 
?> 

EDIT:

ich es, indem Sie dieses Stück Code zu lösen verwaltet:

<script type="text/javascript"> 
$('#user').submit(function(event) { // catch the form's submit event 
    $.ajax({ // create an AJAX call... 
     data: $('#user').serialize(), // get the form data 
     type: 'POST', // GET or POST 
     url: 'admin_user.php', // the file to call 
     success: function(response) { // on success.. 
      $('#include').html(response); // update the DIV 
     }, 
     error: function(jqXHR, textStatus, errorThrown){ 
      alert(textStatus); 
     } 
    }); 
    event.preventDefault(); 
}); 
</script> 

... zu meine admin_search.php Datei.

Dann, wegen einiger unerwarteter Fehler, musste ich zu meinem Ajax Anruf hinzufügen, und voila !. Danke an alle.

Answer 1

In Ihrer $.ajax Funktion sollte das type Attribut einfach so aussehen: type: 'POST'. Auch die url sollte einfach so sein: url: 'admin_user.php'. Auch nicht sicher, ob $(this) innerhalb Ihrer Ajax-Funktion referenziert die self Sie denken, also würde ich explizit diese Zeile ändern: $('#user').serialize().

ALso möchten Sie vielleicht die error Funktion zum ajax Anruf hinzufügen.

EDIT Sie benötigen eine AJAX-Funktionsaufruf nach dem Laden Ihr Formulars auszuführen, so dass diese innerhalb der $('#search').click Methode wären, nach dem Formular zu laden.

Insgesamt würde es so aussehen:

$("#search").click(function(){ 
    $("#include").load("admin_search.php"); 
    $('#user').submit(function() { // catch the form's submit event 
     $.ajax({ // create an AJAX call... 
      data: $('#user').serialize(), // get the form data 
      type: 'POST', // GET or POST 
      url: 'admin_user.php', // the file to call 
      success: function(response) { // on success.. 
       $('#include').html(response); // update the DIV 
      }, 
      error: function(jqXHR, textStatus, errorThrown){ 
       alert(textStatus); 
      } 
     }); 
     return false; // cancel original event to prevent form submitting 
    }); 
});