在加載的文件中加載表單結果

Question

早上好。我試圖從我的同一個文件中加載FORM POST的響應。

這是我的索引：

<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> 

，這是我admin_search.php文件，該文件的情況下，它並不明顯，它是被加載的jQuery我的索引文件中：

<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> 

從理論上講，我應該從我的#include DIV中的admin_user.php中獲得結果，但是我什麼都沒有。

任何人都可以給我一些建議嗎？

編輯：這是我的admin_user.php文件

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

編輯：

我設法通過移動這一段代碼來解決這個問題：

<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> 

...到我的admin_search.php文件。

然後，由於一些意外的錯誤，我不得不將crossDomain: true,添加到我的ajax調用中，並且瞧！感謝大家。

Answer 1

在您的$.ajax函數中，type屬性應該如下所示：type: 'POST'。 url也應該是這樣的：url: 'admin_user.php'。也不確定在你的ajax函數中$(this)是否引用了你正在考慮的self，所以我會明確地將該行更改爲：$('#user').serialize()。

您也可以將error函數添加到ajax調用中。

編輯 您需要加載表單之後，運行AJAX的函數調用，所以這將是$('#search').click方法中，加載表單之後。

總之它是這樣的：

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