我正在尝试使用模态弹出窗口将数据添加到数据库中。但是,一旦保存数据,它就不会在列表页面上显示新数据。如何在不刷新页面的情况下显示新数据。
AJAX 调用
$.ajax({
type: "POST",
url: "ajax.php",
data: {request_type:'ADDEDIT',A:$("#FILELD_A").val(),B:$("#FIELD_B").val(),element_id:tempvarid},
async: false,
success: function(html)
{
data = jQuery.parseJSON(html);
if(data.status==1)
{
showMsg('success',data.msg,true,'');
setTimeout(function(){$('#modal-adducode').modal('hide')},500);
}
else
{
showMsg('danger',data.msg,true,'#document_constant-msg');
}
}
});
HTML 代码
<table id="data-table" class="table table-bordered table-striped">
<thead>
<tr>
<th>Field A</th>
<th>Field B</th>
<th>Created Date</th>
<th>Modified Date</th>
</tr>
</thead>
<tbody>
<? foreach($allData as $val){ echo $val['FamilyId'];?>
<tr>
<td><?=$val['field_a']?></td>
<td><?=$val['field_b']?></td>
<td><?=date("d M y H:i:s",strtotime($val['DateCreated']))?></td>
<td><?=date("d M y H:i:s",strtotime($val['DateModified']))?></td>
</tr>
<? }
?>
</tbody>
</table>
最佳答案
我已经更新了与您新添加的 HTML/PHP 代码相对应的答案。
我看到您正在使用 PHP 来显示您的列表。列表未更新的原因是因为列表是在页面加载时初始化的。当您检索 PHP 页面时,PHP 将检索数据中的列表并在 <table>
中贡献 HTML 。完成后,PHP 贡献的 HTML 已传递到浏览器。仅当您检索列表时,PHP 才会执行,这就是为什么当您在数据库中添加新行时,它不会显示在表中,因为 PHP 贡献列表的那一刻,您的新数据尚未创建。
您始终可以使用我之前版本中相同的方式来更新您的列表。我已根据您的 HTML 调整了代码。
在你的ajax.php中,返回你想要在data
列表中显示的内容,然后将其附加到您的 <table>
中:
$.ajax({
type: "POST",
url: "ajax.php",
data: {
request_type: 'ADDEDIT',
A: $("#FILELD_A").val(),
B: $("#FIELD_B").val(),
element_id: tempvarid
},
async: false,
success: function(html) {
data = jQuery.parseJSON(html);
if (data.status == 1) {
showMsg('success', data.msg, true, '');
// contribute a new line and add it in your list
$('#data-table > tbody').append('<tr>'+
'<td>'+data.field_a+'</td>'+
'<td>'+data.field_b+'</td>'+
'<td>'+data.date_created+'</td>'+
'<td>'+data.date_modified+'</td>'+
'</tr>');
setTimeout(function() {
$('#modal-adducode').modal('hide')
}, 500);
} else {
showMsg('danger', data.msg, true, '#document_constant-msg');
}
}
});
不要忘记在 PHP 中设置 date_created 和 date_modified 的格式 ^_^。
关于javascript - 如何使用AJAX在不刷新页面的情况下获取新添加的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31533107/