<!DOCTYPE html>

<html>

<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>

</head>

<body>

     <div>

         <h1> 表白墙 </h1>

         <p> 输入后点击提交 , 会将信息显示在表格中 </p>

         <div>

             <span> 谁 : </span>

             <input type="text">

         </div>

         <div>

             <span> 对谁 : </span>

             <input type="text">

         </div>

         <div>

             <span> 说什么 : </span>

             <input type="text">

         </div>

         <div>

             <input type="button" value=" 提 交 ">

         </div>

     </div>

     <style>

         * {

             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; }

     </style>

      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

     <script>

         //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(' 提交消息失败 !');

                     }

                 }

             })

     }

     </script>

</body>

</html>