零JS筆記 | Ajax-留言本
用戶驗證：即時提醒
_username1.onblur = function () {
ajax('get', 'guestbook/index.php', 'm=index&a=verifyUserName&username=' + this.value, function (data) {
var d = JSON.parse(data) //數據先轉為objec對像
verifyUserNameMsg.innerHTML = d.message;
if (d.code != 0) { //後端定義狀態碼
verifyUserNameMsg.style.color = 'red'
}
else {
verifyUserNameMsg.style.color = 'green'
}
})
}用戶註冊：
var password1 = document.getElementById('password1')
var btnReg = document.getElementById('btnReg')
btnReg.onclick = function () {
ajax('post', 'guestbook/index.php', 'm=index&a=reg&username=' + encodeURI(_username1.value) + '&password=' + password1.value, function (data) {
var d = JSON.parse(data)
alert(d.message)
})
}更新狀態：
function udpateUserStatus() {
var uid = getCookie('uid')
var username = getCookie('username')
if (uid) {
_user.style.display = 'block'
_userinfo.innerHTML = username
_red.style.display = 'none'
_login.style.display = 'none'
} else {
_user.style.display = 'none'
_userinfo.innerHTML = username
_red.style.display = 'block'
_login.style.display = 'block'
}
}
//getCookie封裝
function getCookie(key) {
var arr1 = document.cookie.split('; ')
for (var i = 0; i < arr1.length; i++) {
var arr2 = arr1[i].split('=')
if (arr2[0] == key) {
return arr2[1]
}
}
}
退出：
_logout.onclick = function () {
ajax('post', 'guestbook/index.php', 'm=index&a=logout', function (data) {
var d = JSON.parse(data)
alert(d.message)
if (!d.code) {
udpateUserStatus()
}
})
return false
}發送留言:
btnPost.onclick = function () {
ajax('post', 'guestbook/index.php', 'm=index&a=send&content=' + encodeURI(content.value), function (data) {
var d = JSON.parse(data)
console.log(d);
if (!d.code) {
createList(d.data, true)
udpateUserStatus()
}
})
}顯示留言 ：
function showlist() {
ajax('post', 'guestbook/index.php', 'm=index&a=getList&n=10&page=' + ipage, function (data) {
var d = JSON.parse(data)
console.log(d);
var data = d.data //注意此處判斷；
if (data) {
for (var i = 0; i < data.list.length; i++) {
createList(data.list[i])
}
} else {
if (ipage == 1) {
_list.innerHTML = '现在还没有留言，快来抢沙发！'
}
showMore.style.display = 'none'
}
})
}創建元素添加到頁面:
function createList(data, insert) {
var dl = document.createElement('dl')
var dt = document.createElement('dt')
var strong = document.createElement('strong')
strong.innerHTML = data.username;
dt.appendChild(strong)
var dd1 = document.createElement('dd')
dd1.innerHTML = data.content
var dd2 = document.createElement('dd')
dd2.className = 't'
var a1 = document.createElement('a')
a1.href = 'javascript:;'
a1.innerHTML = '顶(<span>' + data.support + '</span>)'
var a2 = document.createElement('a')
a2.href = 'javascript:;'
a2.innerHTML = '踩(<span>' + data.oppose + '</span>)'
dd2.appendChild(a2)
dd2.appendChild(a1)
dl.appendChild(dt)
dl.appendChild(dd1)
dl.appendChild(dd2)
if (insert && _list.children[0]) { //如果有第一條，則插入，否則添加；最新總是顯示第一位
_list.insertBefore(dl, _list.children[0])
} else {
_list.appendChild(dl)
}
}顯示更多
var showMore = document.getElementById('showMore')
showMore.onclick = function () {
ipage++
showlist()
}