index.htm
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>XZ</title>
<style>
body{color:#000;background-color:#fff;font-family:Georgia,'Bookman Old Style',Verdana;font-size:14px;text-align:center;padding-top:50px;}
input{cursor:pointer;text-align:center;margin-left:10px;margin-right:10px;}
table{margin-top:15px;}
th,td{border:2px outset #fff;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$('#send').click(function(){
var frm=$('#myform'),
whereTo=frm.attr('action'),
params=frm.serialize(),
tab=$('#users tbody');
$.post(whereTo,params,function(data){
var resp=data.split(','),
info=[];
for(var k=0; k < resp.length; k++){
var temp=resp[k].split('=');
info.push(temp[1]);
}
tab.append('<tr id="user_'+info[0]+'"></tr>');
for(var i=1; i < info.length; i++){
tab.find('tr:last').append('<td>'+info[i]+'</td>');
}
})
});
});
</script>
</head>
<body>
<div id="upl">
<form id="myform" action="serverscript.php">
<input type="text" id="name" name="name" placeholder="name" />
<input type="text" id="lastname" name="lastname" placeholder="lastname" />
<input type="text" id="email" name="email" placeholder="email" />
<input type="text" id="age" name="age" placeholder="age" />
<input type="text" id="gender" name="gender" placeholder="gender" />
<input type="text" id="city" name="city" placeholder="city" /><br /><br />
<input type="button" id="send" value="Отправить" /><input type="reset" value="Очистить" />
</form>
</div>
<table id="users" align="center" cellpadding="5" cellspacing="10" border="1">
<tbody>
<tr><th>Имя</th><th>Фамилия</th><th>Мыло</th><th>Возраст</th><th>Пол</th><th>Город</th></tr>
</tbody>
</table>
<div id="res"></div>
</body>
</html>
serverscript.php
<?php
/* все от балды, просто демо */
$output='id='.rand(1,1000).',';
foreach($_POST as $key=>$val){$output.=$key.'='.$val.',';}
echo substr($output,0,-1);
?>
