在加载的文件中加载表单结果

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