ajax练习四留言板
Posted 。。小兵
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .b { width:100%; margin-top:5px; left:10%; right:10%; background: #CCC; max-height:100px; } .c { width:100%; top:0px; height:30px; background:#C60; } .d { width:100%; top:30px; padding-top:3px; padding-bottom:3px; } .e { width:100%; bottom:0px; height:30px; background:#C60; position:absolute; } </style> <script type="text/javascript" src="../../popwindow/jquery-1.11.2.min.js"></script> <title>无标题文档</title> </head> <body> <?php session_start();//用户登录状态 if (empty($_SESSION["name"])) { echo "<a href=\'index.php\'>未登录</a>"; } else { echo "<a href=\'yonghu.php\'>".$_SESSION["name"]."</a>"; } ?> <div style=" top:50px; width:30%; left:35%; position:absolute;" align="center">留言板</div> <div align="center" style="border:#F00 solid 2px; width:70%; height:500px; left:15%; position:absolute; top:100px" > <div align="left" style="font:\'雅黑\'; color:#F00; font-size:24px ; left:10%; right:10%; margin-top:10px; border-bottom-color:#3F0 ; border-bottom:3px solid; position:absolute;" >投诉意见：</div><div align="left" style="background:#FF9; font-size:10px; width:90%; height:400px; top:50px; left:5%; position:absolute;" id="a"> <?php include ("../DBDA.class.php"); include ("../page.class.php"); $db=new DBDA(); $sqlall="select count(*) from liuyanban "; $attrall=$db->Query($sqlall); $total=$attrall[0][0]; $page=new Page($total,7); //需要参数 1.数据总条 $sql="select * from liuyanban ".$page->limit;//SQL语句拼接limit; $attr=$db->Query($sql); foreach ($attr as $v) { echo " <div class=\'b\'><div class=\'c\'>用户：{$v[1]} 留言时间:{$v[3]}</div><div class=\'d\'>{$v[2]}</div></div>"; } ?> </div> <?php //调用分页信息 echo "<div class=\'e\'>".$page->fpage()."</div>"; ?> </div> <div style="width:80%; top:620px; border:#30F solid 2px; position:absolute; min-height:150px; left:10%;"><font size="+2">你的宝贵建议：</font><textarea id="text" style="width:80%; left:15%; height:100px; margin:10px; position:absolute;"></textarea> <div style="bottom:2px; left:15%; position:absolute;"><input type="button" id="y" value="提交" style="margin-left:10px;"/><input type="button" id="n" value="取消" style="margin-left:10px;"/> </div> </div> </body> <script type="text/jscript"> $(document).ready(function(e) { $("#y").click(function(e) { var nr=$("#text").val(); $.ajax({ url:"chuli1.php", data:{nr:nr}, type:"POST", dataType:"TEXT", success: function(data) { if (data.trim()=="sl") { alert("请先登录"); } else if (data.trim()=="n") { alert("提交失败"); } else { //将返回的信息显示在留言区 var hang=data.split("|"); var str="<div class=\'b\'><div class=\'c\'>用户:"+hang[1]+" 留言时间:"+hang[2]+"</div><div class=\'d\'>"+hang[0]+"</div></div>"; $(\'#a\').append(str); } } }); }); //取消按钮清空文本域 $("#n").click(function(e) { $("#text").empty(); }); }); </script> </html>
登录页面
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="../../popwindow/jquery-1.11.2.min.js"></script> </head> <body> <?php session_start();//用户登录状态 if (empty($_SESSION["name"])) { echo "<a href=\'index.php\'>未登录</a>"; } else { echo "<a href=\'yonghu.php\'>".$_SESSION["name"]."</a>"; } ?> <div align="center" style="width:50%; top:100px; border:#F00 solid 1px ; font:large \'雅黑\' bolder; color:#C30; position:absolute; left:25%; "> <h1>**会员登录</h1> <div style="margin-top:20px; font-size:12px" >用户名：<input type="text" id="name" style="height:15px;"/></div> <div style="margin-top:20px; font-size:12px; margin-bottom:20px;" >密 码：<input type="password"id="pwd" style="height:15px;"/> </div> <div style="font-size:12px; margin-bottom:20px;"><input type="button" value="登录" id="btn"/></div> </div> <script type="text/javascript" > $(document).ready(function(e) { $("#btn").click(function(e) { var name=$("#name").val(); var pwd=$("#pwd").val(); $.ajax({ url:"chuli.php", dataType:"text", data:{name:name,pwd:pwd}, type:"POST", success: function(data){ var a=data.trim(); if (a=="n") { alert("密码或账号错误"); window.location.href="index.php"; } else if (a=="y") { window.location.href="liuyanban.php"; } } }); }); }); </script> </body> </html>
登录处理页面
<?php session_start(); include ("../DBDA.class.php"); $db=new DBDA(); $pwd=$_POST["pwd"]; $name=$_POST["name"]; if ($name!=""&&$pwd!="") { $sql="select password from login where username=\'{$name}\'"; $attr=$db->StrQuery($sql); if($attr==$pwd ) { echo"y"; $_SESSION["name"]=$name; } else { echo"n"; } }
留言板处理
<?php session_start();//用户登录状态 if(empty($_SESSION["name"]))//没有登录 { echo "sl"; } else { include ("../DBDA.class.php"); $name=$_SESSION["name"]; $nr=$_POST["nr"]; $time=date(\'Y-m-d H:i:s\'); $db=new DBDA(); $sql="insert into liuyanban values (\'\',\'$name\',\'$nr\',\'$time\')"; $result=$db->Query($sql,2); if($result)//添加成功 { $str=""; $str=$nr."|".$name."|".$time; echo $str; } else//添加失败 { echo "n"; } }
以上是关于ajax练习四留言板的主要内容，如果未能解决你的问题，请参考以下文章
适合Java语言新手入门练习的框架个人网站项目，目前主要维护网络mysql和网络psql两个分支。前台包括博客、代码库、文件下载、留言、登录注册、站内搜索、分类目录等功能，后台包括上传文件、博客、代码