用ajax做內部留言板
阿新 • • 發佈：2018-01-31
否則 start empty wid inpu ins width charset 內容
理清邏輯先做什麽在做什麽
1.先做登錄頁面
<!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></head> <script src="../jquery-1.11.2.min.js"></script> <body> <h1>登錄頁面</h1> <div>用戶名：<input type="text" id="uid" /></div> <div>密碼：<input type="password" id="pwd" /></div> <div><input type="button" value="登錄" id="btn"/></div> </body> <script type="text/javascript"> $("#btn").click(function(){ var uid = $("#uid").val(); <!--定義uid取其中的值--> var pwd = $("#pwd").val(); <!--定義pwd取其中的值--> $.ajax({ url:"loginchuli.php", <!--數據處理的地址--> data:{uid:uid,pwd:pwd},<!--發送到服務器的數據--> type:"POST", <!--取值類型--> dataType:"TEXT", <!--返回數據類型--> success: function(data){ if(data.trim()=="OK"){ window.location.href="main.php"; }else{ alert("用戶名或密碼錯誤！"); } } }); }) </script> </html>
2.做登錄頁面的處理數據
<?php //登錄處理 session_start(); require_once "DBDA.class.php"; //用DBDA類 $uid = $_POST["uid"]; //用post取uid值 $pwd = $_POST["pwd"]; //用post取pwd值 $db = new DBDA(); $sql = "select password from yuangong where username=‘{$uid}‘"; //sql語句執行查詢和驗證是否密碼相同 $mm = $db->strquery($sql); //調用strquery方法 if(!empty($pwd) && $pwd==$mm){ //驗證密碼是否為空和驗證密碼是否相同 $_SESSION["uid"] = $uid; echo "OK"; }else{ echo "NO"; }
3.做主頁面
<!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> </head> <script src="../jquery-1.11.2.min.js"></script> <body> <h1>主頁面</h1> <?php //阻止用戶跳過登錄 session_start(); //開啟session if(empty($_SESSION["uid"])){ header("location:login.php"); //登錄失敗掉回登錄頁面 exit; } ?> <div><a href="./fabu.php">發布消息</a> <a href="./zhuxiao.php">註銷</a></div> <br /> <div>消息列表：</div> <br /> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td>發送者</td> <td>發送時間</td> <td>留言內容</td> </tr> <tbody id="info"> <!--把info扔到一個tbody--> </tbody> </table> </body> <script type="text/javascript"> $(document).ready(function(e) { $.ajax({ url:"load.php", //跳轉數據處理 dataType:"TEXT", success: function(data){ var str = ""; <!--數據庫中數據分割拼接--> var hang = data.split("|"); for(var i=0;i<hang.length;i++){ var lie = hang[i].split("^"); str += "<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td></tr>"; //str拼接分割時不要有空格和換行否則會出錯 } $("#info").html(str); } }); }); </script> </html>
4.做主頁面處理數據頁面
<?php //主頁處理 session_start(); require_once "DBDA.class.php"; $db = new DBDA(); $uid = $_SESSION["uid"]; $sql = "select yuangong.name,liuyan.times,liuyan.comment from liuyan,yuangong where recever=‘{$uid}‘ and yuangong.username=liuyan.sender"; echo $db->strquery($sql);
5.做註銷處理
<?php //註銷按鍵處理 session_start(); unset($_SESSION["uid"]); header("location:login.php");
6.做發布頁面
<!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 src="../jquery-1.11.2.min.js"> </script> </head> <body> <h1>發布留言</h1> <div> 請選擇好友： <select id="haoyou"> <!-- 做一個選擇好友的下拉列表--> </select> </div> <br /> <div> 請輸入留言內容： <textarea id="neirong"></textarea> </div> <br /> <div> <input type="button" value="發送" id="btn" /> </div> </body> <script type="text/javascript"> $(document).ready(function(e) { $.ajax({ url:"haoyou.chuli.php", dataType:"TEXT", success: function(data){ var str = ""; var hang = data.split("|"); for(var i=0;i<hang.length;i++){ var lie = hang[i].split("^"); str += "<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>"; } $("#haoyou").html(str); } }); $("#btn").click(function(){ var fuid = $("#haoyou").val(); var neirong = $("#neirong").val(); $.ajax({ url:"fabuchuli.php", data:{fuid:fuid,neirong:neirong}, type:"POST", dataType:"TEXT", success:function(data){ if(data.trim()=="OK"){ alert("發布成功！"); }else{ alert("發布失敗！"); } } }); }) }); </script> </body> </html>
7.做發布處理頁面
<?php //發布處理頁面 session_start(); require_once "DBDA.class.php"; $db = new DBDA(); $uid = $_SESSION["uid"]; $time = date("Y-m-d H:i:s"); //取時間 $fuid = $_POST["fuid"]; $neirong = $_POST["neirong"]; $sql = "insert into liuyan values(0,‘{$uid}‘,‘{$fuid}‘,‘$time‘,‘{$neirong}‘,0)"; if($db->query($sql,1)){ echo "OK"; }else{ echo "NO"; }
8.做好友處理頁面
<?php //好友按鍵處理 session_start(); require_once "DBDA.class.php"; $db = new DBDA(); $uid = $_SESSION["uid"]; $sql = "select firend.firend,yuangong.name from firend,yuangong where me=‘{$uid}‘ and yuangong.username = firend.firend"; echo $db->strquery($sql);
用ajax做內部留言板