留言板的代码_留言板留言大全短句

全栈程序员-用户IM • 2022年10月21日下午2:00 • 未分类

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

留言板的代码_留言板留言大全短句

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="arttemplate/template-native.js"></script>

    <script id="tem" type="text/html">
        <!-- 将拿到的数据中 的comments变量 进行遍历 -->
    <% for(var i=0;i < comments.length;i ++){ 
    %>
        <!-- 在每个li中 添加一个自定义的标签属性，用来记录自己的id -->
        <li uid="<%= comments[i].id %>">
            <p class="floor">
                <%= comments[i].id %><a href="javascript:;" class="delete">删除</a>
            </p>
            <p class="author">层主：<span class="name">
                    <%= comments[i].username %>
                </span></p>
            <p class="content">
                <%= comments[i].content %>
            </p>
        </li>
        <% } %>

    </script>
</head>

<body>
    <div class="main">
        <div class="post">
            <h2>新年快乐</h2>
            <p class="author">楼主：<span>alian</span></p>
            <p class="txt">新年快乐，万事如意</p>
        </div>
        <hr>
        <div class="reply">
            <h4>发表回复</h4>
            <p>用户名：<input type="text" class="usename"></p>
            <textarea class="contents"></textarea><br>
            <input type="button" value="发表" class="btn">
        </div>

        <div class="cmst">
            <ul class="list">
                <!-- <li>
                    <p class="floor">1楼<a href="javascript:;" class="delete">删除</a></p>
                    <p class="author">层主：<span class="name">哈哈哈</span></p>
                    <p class="content">happy new year!</p>
                </li> -->
            </ul>
        </div>
    </div>

    <script>
        //获取元素
        var $list = $(".cmst .list");
        var $comment = $(".reply .contents");
        var $user = $(".reply .usename");
        var $btn = $(".reply .btn")
        //获取后台数据
        getData();
        //封装函数
        function getData(){ 
   
            $.ajax({ 
   
                url: "http://localhost:3000/db",
                type: "GET",
                success: function (data) { 
   
                    // console.log(data);
                    //将得到的数据添加到模板
                    $list.html(template("tem", data));

                    //在这里可以正常获取所有添加的元素
                    //需要获取删除按钮，并添加点击事件，删除自己所在的li标签
                    deleteData();
                }
            })
        }
        

        //增加一项新的数据到数据库中
        //添加点击事件
        $btn.click(function () { 
   
            var username = $user.val();
            var content = $comment.val();
            $.ajax({ 
   
                url: "http://localhost:3000/comments",
                type: "POST",
                dataType: "json",
                data: { 
    username: username, content: content },
                success: function (data) { 
   
                    // $list.append(template("tem", { "comments": [data]}));
                    getData();
                }
            }) 
            // 清空输入
            $user.val("");
            $comment.val("");
        })
  
        //封装删除函数
        function deleteData(){ 
   
            // 定义 点击按钮删除
            $(".cmst .list .delete").click(function(){ 
   
                // 要找到自己的祖先中的li标签
                $li = $(this).parents("li");
                // 找到li标签记录在数据库中的id
                var index = $li.attr("uid");
                // 发送请求
                $.ajax({ 
   
                    url: " http://localhost:3000/comments/"+index,
                    type: "DELETE",
                })
                // 从DOM结构中删除对应的li
                $li.remove();
            })
        }

    </script>
</body>

</html>