一个小小的留言本
2019-04-11 本文已影响5人
CondorHero
需求分析：
用户可以在留言本留言，并对内容进行增删查改。
涉及知识点：
- PHP语言
- 数据库的增删查改
留言页面 write.html
留言页面 write.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言本</title>
</head>
<body>
<h3>欢迎给我留言</h3>
<p>
请输入用户名 ：
<input type="text" id = "user">
</p>
<p>
输入你的QQ号：
<input type="text" id="qq">
</p>
<p>
<textarea name="" id="txt" cols="40" rows="10"></textarea>
</p>
<p>
<input type="button" id = "btn" value = "提交留言">
</p>
<script src = js/myAjax.js></script>
<script>
//得到操作元素
var username = document.getElementById("user");
var qqnumber = document.getElementById("qq");
var txtarea = document.getElementById("txt");
var btns = document.getElementById("btn");
//事件监听
btn.onclick = function(){
//得到输入值的内容
user = username.value;
qq = qqnumber.value;
txt = txtarea.value;
btn = btns.value;
//对输入的内容添加正则验证
if(!/[\u4e00-\u9fa5]{2,6}/.test(user)){
alert("用户名非法！");
return;
}
if(!/[\d]{5,12}/.test(qq)){
alert("QQ号填写不正确！");
return;
}
//通过post调用write.php进行数据的写入
myAjax.post("PHP/write.php",{
"username" : user,
"qqnumber" : qq,
"content" : txt
},function(err,data){
if(err){
alert(err);
return;
}
//输出的字符串转化为JSON
var obj = eval("(" + data + ")");
if(obj.result == "ok"){
alert("提交成功，你已成功留言！");
}else {
alert("留言失败！");
}
btns.value = "提交留言";
btns.disabled = "";
});
this.value = "正在提交...";
//在input框中加入disabled="disabled"之后，字体默认的就变成灰色
this.disabled = "disabled";
}
</script>
</body>
</html>
所以，如果你那边能确定后台返回的是字符串，就使用eval("("+data+")")(eval会带来很多问题，不建议使用，如果想实现转化用JSON.parse更好)，如果后台返回的是json对象，什么操作都不需要，直接使用data即可。如果你是用的jquery, 将type（一般为这个配置属性）设为json，或者利用$.getJSON()方法获得服务器返回，那么就不需要eval()方法了，因为这时候得到的结果已经是json对象了，只需直接调用该对象即可
为什么 eval 要添加括号呢？
原因：eval本身的问题。 由于json是以{}的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。
write.php
<?php
//得到queryJSON的值
$user = $_POST["username"];
$qq = $_POST["qqnumber"];
$txt = $_POST["content"];
//注释：请注意 PHP date() 函数会返回服务器的当前日期/时间！
date_default_timezone_set("Asia/Shanghai");
//h - 带有首位零的 12 小时小时格式 H24制
$shijian = date("Y.m.d.l H:i:s a");
//连接数据库
$ccon = mysql_connect("localhost","root","root");
//选择数据库
mysql_select_db("message pad",$ccon);
//设置字符集
mysql_query("SET NAMES UTF8");
//数据库插入数据
$result = mysql_query("INSERT INTO message(user,shijian,content,qq) VALUES ('{$user}','{$shijian}','{$txt}',{$qq})");
if($result == 1){
echo "{'result' : 'ok'}";
}
//关闭数据库
mysql_close($ccon);
?>
主页面 index.html
主页面 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小小留言本</title>
<style>
table,td,th {
border: 1px solid #ccc;
}
td,th {
width:200px;
line-height: 25px;
}
</style>
</head>
<body>
<h1>留言内容！</h1>
<table cellspacing="0" id = "biao">
<tr>
<th>id</th>
<th>姓名</th>
<th>date</th>
<th>QQ</th>
<th>Content</th>
<th>删除</th>
</tr>
</table>
<script src = js/myAjax.js></script>
<script>
var biaoge = document.getElementById("biao");
myAjax.get("PHP/read.php",{"paixu":1},function(err,data){
if(err){
alert(err);
return;
}
var obj = eval("(" + data + ")");
console.log(obj);
console.log(obj.jieguo[0]);
for(var i = 0; i < obj.jieguo.length;i++){
var o = JSON.parse(obj.jieguo[i]);
console.log(o.shijian);
console.log(o.id);
console.log(o.qq);
console.log(o.user);
console.log(o.content);
biaoge.innerHTML +=
"<tr>"+
"<td>"+ o.id +"</td>"+
"<td>"+ o.qq +"</td>"+
"<td>"+o.user +"</td>"+
"<td>"+ o.shijian +"</td>"+
"<td>"+ o.content +"</td>"+
"<th><a d="+o.id+" href = 'javascript:0;' class = 'shan'>Delete</a></th>"+
"</tr>";
}
var shan = document.getElementsByClassName("shan");
for(var i = 0; i < shan.length; i++){
shan[i].onclick = function(){
//getAttribute() 方法通过名称获取属性的值。
myAjax.get("PHP/delete.php",{"id":this.getAttribute("d")},function(err,data){
if(data == "ok"){
var a = confirm("是否确定删除！");
}else {
alert("删除失败！！！");
}
});
}
}
if(obj){
alert("留言读取成功！");
}else {
alert("留言读取失败！");
}
});
</script>
</body>
</html>
删除 delete.php
<?php
$id = $_GET["id"];
$ccon = mysql_connect("localhost","root","root");
mysql_select_db("message pad",$ccon);
mysql_query("SET NAMES UTF8");
// DELETE 语句用于删除表中的行
// 语法：DELETE FROM 表名称 WHERE 列名称 = 值
$result = mysql_query("DELETE FROM message WHERE id = {$id}");
if($result){
print_r("ok");
}
mysql_close($ccon);
?>
read.php
<?php
//isset -- 检测变量是否设置
if(isset($_GET["paixu"])){
$paixu = $_GET['paixu'];
}else {
$paixu = 1;
}
$ccon = mysql_connect("localhost","root","root");
mysql_select_db("message pad",$ccon);
mysql_query("SET NAMES UTF8");
//asc 按升序排列 (不用写，默认使用这个)desc 按降序排列
/*例：
select * from yourtable where 查询条件 order by id desc limit 0,10;
按id倒序排列，且取前10条*/
if($paixu == 0){
$sql = "SELECT * FROM message ORDER BY ID DESC";
}else {
$sql = "SELECT * FROM message";
}
$result = mysql_query($sql);
$arr = array("jieguo"=>array());
while($row = mysql_fetch_array($result)){
array_push($arr["jieguo"], json_encode($row));
}
$json = json_encode($arr);
print_r($json);
mysql_close($ccon);
// json_encode用法
// $arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
// echo json_encode($arr);
// {"a":1,"b":2,"c":3,"d":4,"e":5}
?>
