史老师开学前布置的项目,用网页实现学生个人信息的增删查改,寒假时只看完了html和js,jQuery和PHP都处于现学现卖的状态,不过既然没要求交,那就瞎折腾吧。
(2016.3.19)目前已实现功能:
1.增:通关网页页面(表单)向数据库中添加个人信息
2.删:清空表单信息、删除数据表(后者慎用)
3.查:通过班级/姓名/学号/性别查询表单信息(存在BUG)
主要结构为三个主要页面和五个PHP文件:
1.主页界面Indx,供用户选择使用的功能(信息录入or信息查询)
源代码如下
<html>
<head>
<title>学生个人信息登记表</title>
</head>
<body>
<h1 align="center" >学生个人信息登记表</h1>
<a href="PHPtest.php"><p align="center">个人信息录入</p>
<a href="Search.php"><p align="center">个人信息查询</p>
</body>
</html>
界面如图,之后可逐步添加其他功能并进行页面美化
2..个人信息录入界面PHPtest.php,主要实现数据表的添加和清空、删除功能
(1)添加:在文本框里输入的个人信息在点击submit后,通过post方法发送至数据库,再通过MySQL的Insert方法添加至数据表
(2)清空数据表内容:点击最下方的清空表单按钮,会利用HTTP POS通过Ajax发送post请求,调用emptyform.php文件,在文件中DELETE FROM语句实现数据表清空
(3)删除数据表(慎用):点击最下方的删除表单按钮,会利用HTTP POS通过Ajax发送post请求,调用deleteform.php文件,在文件中DROP TABLE语句实现数据表清空(删除后数据表无法使用,需重建)
(4)获取整个表单的信息:点击最下方的获取表单按钮,同理调用getdata.php,使用SELECT语句输出表单。
源代码如下
(1)PHPtest.php
<!DOCTYPE HTML>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$.post(
'getdata.php',
function(data){
$("#div2").html(data);
}
);
});
$("#btn2").click(function(){
var ans=confirm("确定清空整个表单?");
if(ans){
$.post(
'emptyform.php',
function(data){
$("#div2").html(data);
}
);
}
});
$("#btn3").click(function(){
var ans=confirm("确定删除整个表单?");
if(ans){
$.post(
'deleteform.php',
function(data){
$("#div2").html(data);
}
);
}
});
/*$("#submit").submit(function(){
$.post(
"insert.php",
function(data){
$("#div1").html(data);
}
);
});*/
});
</script>
</head>
<body>
<?php
// define variables and set to empty values
$class = $id = $gender = $name= "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$class = test_input($_POST["class"]);
$id = test_input($_POST["id"]);
$name = test_input($_POST["name"]);
$gender = test_input($_POST["gender"]);
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<h2>学生个人信息录入表</h2>
<form id="form1" method="post" action="insert.php">
班级:<input type="text" name="class">
<br><br>
学号:<input type="text" name="id">
<br><br>
姓名:<input type="text" name="name">
<br><br>
性别:
<input type="radio" name="gender" value="女">女性
<input type="radio" name="gender" value="男">男性
<br><br>
<input type="submit" id="submit" name="submit" value="提交">
<input type="button" id="btn1" name="getdata" value="获取表单">
<input type="button" id="btn2" name=