[英]How to update the table on the page, after submitting the form via AJAX?
I have a form and a table. 我有一个表格和一张桌子。 When I submit a form using AJAX, I need to see the result immediately in the table, without rebooting p.
当我使用AJAX提交表单时,需要立即在表中看到结果,而无需重新启动p。
That is the order of such. 就是这样的顺序。 1. Fill out the form 2. I send through AJAX in a DB 3. I reload the page, and I see the result
1.填写表格2.通过数据库中的AJAX发送3.重新加载页面,然后看到结果
//AJAX -
$("#reg").submit(function(event){
var fn = document.getElementById('fn').value,
ln = document.getElementById('ln').value,
phone = document.getElementById('phone').value;
event.preventDefault();
//вторая проверка на валидацию
if (fn.length < 3 || ln.length < 3 || phone.length < 6) {
console.log('некорректно фрорма регист')
} else {
$.ajax({
type: 'POST',
url: 'regist.php',
data: {
First:fn,
Last:ln,
'Telephone[0]':phone
},
success: function( response ){
jQuery('#reg')[0].reset();//отчистить форму
console.log(response);
}
});
}
});
<div class="table">
<table border="1" >
<thead>
<tr>
<th>ID R </th><th>ID U</th><th>Name</th><th>Last Name</th><th>Phone 1</th><th>Phone 2</th><th style="color: red; font-weight: bold;">X</th>
</tr>
</thead>
<tbody id='trash'>
//get table таблицу
<?php require_once('table.php'); ?>
</tbody>
</table>
//get info from table.
<form method="POST">
<input type="submit" name="get_info" value="Show list" class="show_list" />
</form>
</div>
I found a solution. 我找到了解决方案。 I created another request and call it in register.
我创建了另一个请求,并在注册时调用它。
//AJAX - добавить юзера
$("#reg").submit(function(event){
var fn = document.getElementById('fn').value,
ln = document.getElementById('ln').value,
phone = document.getElementById('phone').value;
event.preventDefault();
//вторая проверка на валидацию
if (fn.length < 3 || ln.length < 3 || phone.length < 6) {
console.log('Некорректно Заполнена фрорма регистрации')
} else {
$.ajax({
type: 'POST',
url: 'regist.php',
data: {
First:fn,
Last:ln,
'Telephone[0]':phone
},
success: function( response ){
jQuery('#reg')[0].reset();//отчистить форму
dynamicTable();//строка 254 | динамически обновить табл.
console.log(response);
}
});
}
});
//AJAX -динамически обновить табл.
function dynamicTable() {
$.ajax({
type: 'GET',
url: 'table.php',
dataType: "html",
success: function( html ){
// console.log(html);
$("#trash").html(html);
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.