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

留言板的代码_留言板留言大全短句<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><metahttp-equiv=”X-UA-Compatible”content=”IE=edge”><metaname=”viewport”content=”width=device-width,initial-scale=1.0″><title>D.

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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>

json文件里的所有数据
留言板的代码_留言板留言大全短句
传递的数据:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/179484.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • mac命令行:E325: ATTENTION

    mac命令行:E325: ATTENTIONE325:ATTENTIONFoundaswapfilebythename”.bash_profile.swp”ownedby:rootdated:FriAug2516:23:422017filename:~root/.bash_profilemodified:nouse

  • netty权威指南(第二版)对应的源码「建议收藏」

    netty权威指南(第二版)对应的源码「建议收藏」《netty权威指南(第二版)对应的源码》一个哥们创建的git库《源码原始地址》有关该书的更多信息可以关注李林峰老师的在ifeve网站上的文章:http://ifeve.com/author/linfeng/

  • 2020年10月笔记

    2020年10月笔记

  • Fungus插件_插件大师

    Fungus插件_插件大师一个任务的fungus声明fungus设置一个开关,当触发碰撞器时,将开关打开,当在持续碰撞时如是碰到的是人物,并且按下空格且开关为开,就执行对话重载名字并且关闭开关//多个任务的时候就是加个else其他都一样usingSystem;usingSystem.Collections;usingSystem.Collections.Generic;usingFungus;usingUnityEngine;publicclassFungunNpcGrandFather:.

    2022年10月25日
  • Eigen库要点「建议收藏」

    Eigen库要点「建议收藏」旋转矩阵,旋转向量,四元数关系如下:另外,初始化(赋值)变换矩阵T的方式为:Isometry3dTcw(rotation);//rotation可以是旋转矩阵,可以是四元数,可以是旋转向量Tcw.pretranslate(t);//添加平移向量//或者:Isometry3dTcw=Isometry3d::Identity()//如果没有直接初始化,先设为单位阵Tcw.pre…

    2022年10月19日
  • linux top命令 详解「建议收藏」

    linux top命令 详解「建议收藏」top命令主要用来观察和收集运行在系统上的进程的一些有用信息。ps只是一个快照,是ps命令执行的那一瞬间的系统中进程的快照。top则可以用于持续观察。第一步,在命令行键入top,回车进入top管理界面。第一行其实和uptime的执行效果是一样的。分析一下,12:48:06是当前运行这个命令的时候,机器的时间。up134days,19:36,指的是说这台机器,持续运行了134天了,启动于134天前的19:36。5users代表的是当前运行这个命令的时候,这台机器上总共登陆有5个用

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号