[英]inserting an ajax response into div
第一次AJAX尝试.....我正在尝试根据使用按钮所做的选择来更新a。
我目前只是向ID发出警报,因为这是我能确定的所有措施。
是否可以将文件my_page.php放入类为“ populated_info”的div中? 然后,当我按下另一个按钮时,页面将再次运行,并用新结果填充div。 我已经基于ID构建并运行了my_page.php,只是无法将其呈现在正确的位置。
HTML:
<form name="gen_info">
<div class="body">
<div class="row">
<div class="col-md-2">
<table width="100%" class="border_yes">
<tr>
<td>
Last Name, First Name
</td>
</tr>
<?php
$result = mysqli_query($conn,"SELECT * FROM general_info");
while($row = mysqli_fetch_array($result))
{
$CURRENT_ID = $row['ID'];
$firstName = $row['firstName'];
$lastName = $row['lastName'];
?>
<tr>
<td>
<button type="button" class="btn btn-default custom" onclick="function1('<?php echo $CURRENT_ID;?>')"><?php echo $lastName.', '.$firstName; ?></button>
<!-- button that will run the function -->
</td>
</tr>
<?php
}
?>
</table>
</div>
<div class="col-md-10 populated_info"> <!-- WHERE I WOULD LIKE THE UPDATED INFORMATION -->
</div>
</div>
</div>
</form>
AJAX:
<script>
function function1(ID) {
$.ajax({
type: "POST",
url: "functions/my_page.php",
data: "ID="+ID,
success: function(resp){
alert(resp); //how to get this to put the page back into the right spot?
},
error: function(e){
alert('Error: ' + e);
}
});
}
</script>
您的方法:
关于您的按钮,我建议您将内联Javascript处理程序分开,以使HTML和Javascript分开。 我将使用自定义数据属性在此处存储ID:
<button type="button" class="btn btn-default custom mybutton" data-id="<?php echo $CURRENT_ID;?>">
<?php echo $lastName . ', ' . $firstName; ?>
</button>
然后jQuery:
$('.mybutton').click(function() {
var ID = $(this).data('id');
function1(ID);
});
您的AJAX请求:
您可以缩短整个函数,并使用$.load()
将数据放入div中:
function function1(ID) {
// Get the output of functions/my_page.php, passing ID as parameter, and
// replace the contents of .populated_info with it
$('.populated_info').load('functions/my_page.php', { ID: ID });
}
看起来这里不需要回调函数,但是如果您需要,可以将其放在data参数之后。 回调的一个有用应用可能是您的错误处理程序。 请参阅此处如何实施。
顺便说一句,如果您只是获取数据,则可能应该使用GET HTTP方法而不是POST。
如果您成功从服务器获得响应,只需replace alert(resp)
$('.populated_info').html(resp);
<script>
function function1(ID) {
$.ajax({
type: "POST",
url: "functions/my_page.php",
data: "ID="+ID,
success: function(resp){
$('.populated_info').html(resp);
},
error: function(e){
alert('Error: ' + e);
}
});
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.