早上好。我试图在同一个文件中加载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调用中,瞧!谢谢大家。
答案 0 :(得分:0)
在$.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
});
});