<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

<div>

<p> 輸入後點選提交 , 會將資訊顯示在表格中 </p>

<div>

</div>

<div>

</div>

<div>

</div>

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

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

情人節到了，手把手教你做一個表白牆，附有詳細步驟

相關文章