表白墙
输入后点击提交
,
会将信息显示在表格中
谁
:
对谁
:
说什么
:
提 交
">
* {
margin: 0;/* 设置外边距为 0*/
padding: 0;/* 设置内边距为 0*/
box-sizing: border-box;/* 设置边框不会撑大盒子 */
}
.title{
color:red;
font-family:KaiTi;
}
.container {
width: 400px;
margin: 0 auto;/* 设置居中对齐 */
padding-top: 50px;
}
h1 {
text-align: center;
padding-top: 50px;
}
p {
color:black;
text-align: center;
font-size: 14px;
padding: 10px 0;
}
.row {
height: 40px;
display: flex;/* 弹性布局 */
justify-content: center;
align-items: center;
font-family: KaiTi;
font-weight: 700;
}
span {
width: 100px;
line-height: 40px;
}
.edit {
width: 200px;
height: 30px;
padding-left: 5px;
}
.submit {
width: 304px;
height: 40px;
color: white;
background-color: orange;
border: none;/* 去除边框 */
border-radius: 15px;
}
.submit:active{
background-color:rgb(181, 184, 38);
}/* 设置点击提交按钮时的效果 */
html, body {
height: 100%;/* 设置整体页面高度 , 让页面和浏览器窗口一样高 */
background-image: url(" 表白墙壁纸 .png");/* 设置背景图片 */
background-position: center center;
background-size:cover;
background-repeat: no-repeat; }
//1. 在页面加载的时候,访问服务器,从服务器这边获取到消息列表,并展示出来
function load() {
// 通过这个 load 函数 , 从服务器上获取到消息 , 并进行展示
$.ajax({
type: 'GET',
url: 'message',
success: function(data, status) {// 构造一个回调函数
// data 是响应的 body, 外汇跟单gendan5.com 此时的响应可能只是一个字符串格式 , 可以手动的进行一个解析 , 按照 json 格式解析成对象
let container = document.querySelector('.container');
// let messages = JSON.parse(data);
let messages = data;
for (let message of messages) {// 解析相关响应后进行一系列地 html 拼装
let row = document.createElement('div');// 构造出一行来
row.className = 'row';
row.innerHTML = message.from + ' 对 ' + message.to + ' 说 : '+ message.message;
container.appendChild(row);// 把每一条消息都加到父元素中
}
}
});
}
load();
//2. 点击提交按钮的时候,把当前的数据构造成一个 HTTP 请求,发送给服务器
// 给点击按钮注册点击事件
let submit = document.querySelector('.submit');// 获取到提交按钮
submit.() {
// 1. 获取到编辑框内容
let edits = document.querySelectorAll('.edit');
let from = edits[0].value;
let to = edits[1].value;
let message = edits[2].value;
console.log(from + "," + to + "," + message);
// 对用户输入的内容做一个检查,确保是合法的提交
if (from == '' || to == '' || message == '') {
return;
}
// 2. 构造 html 元素
let row = document.createElement('div');
row.className = 'row';
row.innerHTML = from + ' 对 ' + to + ' 说 : ' + message;
// 3. 把构造好的元素添加到 DOM 树中
let container = document.querySelector('.container');
container.appendChild(row);
// 4. 同时清理之前输入框的内容
for (let i = 0; i < 3; i++) {
edits[i].value = '';
}
$.ajax({
type: "POST",
url: "message",
data: JSON.stringify({from: from, to: to, message: message}),
contentType: "application/json; charset=utf-8",
success: function(data, status) {
if (data.ok == 1) {
console.log(' 提交消息成功 !');
} else {
console.log(' 提交消息失败 !');
}
}
})
}