留言页面添加功能 登录

留言页面添加功能

1,留言添加功能前端展示

这里需要引入kindeditor编辑器,百度下载一个引进js文件如下:

<script src="kindeditor/kindeditor/kindeditor-all.js"></script>

并在内容里添加如下代码:(#content对应着id属性)

    <script>
                   KindEditor.ready(function(K) {
                       window.editor = K.create('#content',{
                           afterBlur:function(){this.sync();}
                       })
           
                   });
      </script>

即可,具体代码如下所示:

<!DOCTYPE html>
<html>
    <head>
        <title>留言板</title>
        <meta charset="UTF-8">
        <script src="kindeditor/kindeditor/kindeditor-all.js"></script>
    </head>
    <body>
        <div><h1>留言板</h1></div>
        <div>
            <form action="insertdb.php" method="post">
                标题:<input type="text" id="title" name="title"><br>
                内容:<br><span><textarea name="content" rows="13" cols="80" id="content"></textarea>
                <script>
                    KindEditor.ready(function(K) {
                        window.editor = K.create('#content',{
                            afterBlur:function(){this.sync();}
                        })
                    });
                </script>
                </span>
                <input type="submit" name="dosub" id="btn" value="上传留言">
            </form>
        </div>
    </body>
</html>

页面展示如下:

微信图片_20180308095345.png

2,提交请求处理

新建insertdb.php:

代码如下:

<?php
include './mysqli.php';
header('Content-type:text/html;charset=utf-8');
$tit=$_POST["title"];
$con=$_POST["content"];
$sql="insert into message(title,content) values('$tit','$con')";
if($mysqli->query($sql))
{
    echo "留言成功,3秒后跳转原页面";
}else{
    echo "留言失败,3秒后跳转原页面";
}
header("Refresh:3;url=message.php");

3,效果如下图所示:

gif5新文件 (18).gif

大家可以思考下如何用ajax无刷新页面来做添加功能?(下一节将介绍)

下一节
<?php echo "留言添加功能";
提交 重置代码
章节 评论 笔记 课件
  • 取消 回复 发送
  • 取消 发布笔记 发送