<?
$mysqli = new Mysqli('localhost', 'root', '', 'mybase');
$name = trim($_POST['name']);
$surname = trim($_POST['surname']);
$age = intval($_POST['age']);
if($name && $surname && $age){
$query = $mysqli->query("INSERT INTO `users` VALUES(NULL, '$name', '$surname', '$age')");
$query2 = $mysqli->query("SELECT * FROM `users` ORDER BY `id` DESC");
while($row = $query2->fetch_assoc()){
$users['id'][] = $row['id'];
$users['name'][] = $row['name'];
$users['surname'][] = $row['surname'];
$users['age'][] = $row['age'];
}
$message = 'Все хорошо';
}else{
$message = 'Не удалось записать и извлечь данные';
}
$out = array(
'message' => $message,
'users' => $users
);
header('Content-Type: text/json; charset=utf-8');
echo json_encode($out);
?>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<form method="post" action="ajax/for_db.php">
<input type="text" name="name" class="nameField" placeholder="Введите имя">
<input type="text" name="surname" class="surnameField" placeholder="Введите фамилию">
<input type="text" name="age" class="ageField" placeholder="Введите возраст">
<input type="submit" value="enter" class="button">
</form>
<table class="rows">
</table>
<script>
jQuery(document).ready(function() {
jQuery(".button").bind("click", function() {
var name = jQuery('.nameField').val();
var surname = jQuery('.surnameField').val();
var age = jQuery('.ageField').val();
jQuery('.nameField').val('');
jQuery('.surnameField').val('');
jQuery('.ageField').val('');
jQuery.ajax({
url: "for_db.php",
type: "POST",
data: {name:name, surname:surname, age: age},
dataType: "json",
success: function(result) {
if (result){
jQuery('.rows tr').remove();
jQuery('.rows').append(function(){
var res = '';
for(var i = 0; i < result.users.name.length; i++){
res += '<tr><td>' + result.users.id[i] + '</td><td>' + result.users.name[i] + '</td><td>' + result.users.surname[i] + '</td><td>' + result.users.age[i] + '</td></tr>';
}
return res;
});
console.log(result);
}else{
alert(result.message);
}
return false;
}
});
return false;
});
});
</script>
</body>
</html>