用AJAX方法可将表单中的数据传至后台进行处理,而不需要进行页面的跳转,可以在当前页面完成。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
//用JQuery的方法实现
<script>
$(document).ready(function(){
$("#butt").click(function(){
var val_ShenFZ = $(":input[name='ShenFZ']").val();
var val_sex = $(":input[name='sex']").val();
var val_name_parent = $(":input[name='name_parent']").val();
var val_Zhuangtai = $(":input[name='Zhuangtai']").val();
var val_telephone =$(":input[name='telephone']").val();
var val_phone2 = $(":input[name='phone2']").val();
var url = "infor.php"; //处理数据的后台文件
//传递参数,必须是JSON格式
var args = {"ShenFZ":val_ShenFZ,
"sex":val_sex,
"name_parent":val_name_parent,
"Zhuangtai":val_Zhuangtai,
"telephone":val_telephone,
"phone2":val_phone2,
"time":new Date()};
$.post(url,args,function(date){
alert(date);
});
});
});
</script>
</head>
<body>
<form>
<div id="left">
身份证:<input type="text" name="ShenFZ"><br>
性别:<input type="text" name="sex"><br>
家长姓名:<input type="text" name="name_parent"><br>
</div>
<div id="left">
在籍状态:<input type="text" name="Zhuangtai"><br>
手机号码:<input type="text" name="telephone"><br>
第二联系号码:<input type="text" name="phone2"><br>
</div>
</form> <br><br>
</div>
<button id="butt" style="width:60px;height:30px">确定</button>
</div>
</body>
</html>