发布时间：2025-12-09 14:00:36 浏览次数：4
<!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 type="text/html"><!-- 将拿到的数据中 的comments变量 进行遍历 --><% for(var i=0;i < comments.length;i ++){ %><!-- 在每个li中 添加一个自定义的标签属性，用来记录自己的id --><li u><p ><%= comments[i].id %><a href="javascript:;" >删除</a></p><p >层主：<span ><%= comments[i].username %></span></p><p ><%= comments[i].content %></p></li><% } %></script></head><body><p ><p ><h2>新年快乐</h2><p >楼主：<span>alian</span></p><p >新年快乐，万事如意</p></p><hr><p ><h4>发表回复</h4><p>用户名：<input type="text" ></p><textarea ></textarea><br><input type="button" value="发表" ></p><p ><ul ><!-- <li><p >1楼<a href="javascript:;" >删除</a></p><p >层主：<span >哈哈哈</span></p><p >happy new year!</p></li> --></ul></p></p><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标签记录在数据库中的idvar index = $li.attr("uid");// 发送请求$.ajax({ url: " http://localhost:3000/comments/"+index,type: "DELETE",})// 从DOM结构中删除对应的li$li.remove();})}</script></body></html>json文件里的所有数据
传递的数据:
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流