用ajax做内部留言板

Posted palpitate

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用ajax做内部留言板相关的知识，希望对你有一定的参考价值。

 理清逻辑先做什么在做什么

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做内部留言板的主要内容，如果未能解决你的问题，请参考以下文章

20180826 优化版留言板 PHP ajax html css js jq

ajax 提交表达数据到后台

用wordpress做网站留言，评论，添加客服和订单需要啥插件？

html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

底部导航 如何从片段内部更改片段

AJAX相关JS代码片段和部分浏览器模型