h5前端留言发布带分页的小demo

最新推荐文章于 2021-06-03 02:55:31 发布

一盘土豆丝

最新推荐文章于 2021-06-03 02:55:31 发布

阅读量580

点赞数

分类专栏：前端文章标签：留言分页 h5 动态添加

本文链接：https://blog.csdn.net/qq_38483557/article/details/90671087

版权

这是一个基于H5的前端留言系统示例，具备动态添加、删除和分页功能。通过AJAX与后端交互获取数据，CSS样式美化界面。在实现中，需要注意动态加载的元素需使用on事件来绑定点击事件，以确保功能正常运行。

摘要由CSDN通过智能技术生成

这个样例是在网上下载的一个只有留言前端的代码,自己改进了一下,可以删除新增从后台查数据过来,如果有侵权还请联系我删除

//这里的前端的大概布局


 <div class="mainframe">
                <div class="title">留言板</div>
                <div class="message">主人寄语</div>
                <div class="info">
                    这是主人留下的寄语~
                </div>
                <div class="content" contenteditable="true"></div>
                <div style="width: 80%;margin: auto">
                    <input type="button" name="submit" value="发表" class="subbtn">
                </div>

                <div class="numofmessage">留言</div>
                <!--<div class="numofmessage">留言(0)</div>-->
                <!-- 下面是留言区 -->
                <div class="msgFrame">
                    <table id="messageData" >
                    </table>
                    <table class="fenye">
                        <tr><td><div id="barcon" name="barcon"></div></td></tr>
                    </table>
                </div>
            </div>

这里是js代码,包括与后端交互的ajax

var count=0;
$(".subbtn").click(function(){
    var text= $(".content").text();//留言的内容
    var time=getCurrentTime();//留言的时间
    var leaveName  = "张三" ;//留言人
    var ImageSrc = "http://qlogo3.store.qq.com/qzone/1262283870/1262283870/100?1481718124";//留言人的头像地址
    var leaveId = "123456";//留言人的Id
    var IdSrc= "famousHall.html";//这里应该是基地址加留言人的ID
    var dieId = "456789";//逝者的ID
    if(text==""){
        alert("您还没有输入任何内容！");
    }
    else{
        $.ajax({
            type: "POST",
            url: "",
            data: {

            },
            dataType: "json",
            error: function () {//请求失败处理函数
                alert("请求失败=====")
                var contentDiv = '<tr><td>'
                 contentDiv+='<div class="content_1">';
                contentDiv+='<img class="name" alt="photo" src ='+ImageSrc+'>';
                contentDiv+='<div class="mainInfo">';
                contentDiv+=' <div class="userId"><a href='+IdSrc+'