您好,登錄后才能下訂單哦!
如何在php中利用ajax實(shí)現(xiàn)一個(gè)無(wú)刷新的留言板功能?相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策,為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法,通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
數(shù)據(jù)庫(kù)連接代碼如下:
<?php $conn = @mysql_connect("localhost","root","root") or die ("MySql連接錯(cuò)誤"); mysql_select_db("demo",$conn); mysql_query("set names 'utf8'"); ?>
index.php文件代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="bbs.css" type="text/css" rel="stylesheet"> <title>無(wú)刷新顯示回帖</title> <script src="bbs.js" type="text/javascript"></script> </head> <body> <h2>無(wú)刷新顯示回帖</h2> <div id="thread"> <?php include("conn.php"); $sql = "select * from `bbs_post` where `threadid` ='1' order by id asc"; $query =mysql_query($sql); while($row = mysql_fetch_array($query)){ ?> <div class="post" id="post<?php echo $row['id'];?>"> <div class="post_title"><?php echo $row['title'];?> [<?php echo $row['username'];?>]</div> <div class="post_content"><pre><?php echo $row['content'];?></pre></div> </div> <?php } ?> </div> <table class="reply"> <tr> <td colspan="2" class="title">回帖<input type="hidden" name="threadid" id="threadid" value="1"></td> </tr> <tr> <td>姓名:</td> <td><input type="text" name="username" id="username"></td> </tr> <tr> <td>標(biāo)題:</td> <td><input type="text" name="post_title" id="post_title"></td> </tr> <tr> <td>內(nèi)容:</td> <td><textarea name="post_content" id="post_content"></textarea></td> </tr> <tr> <td colspan="2"><input type="button" onclick="submitPost()" value="提交"></td> </tr> </table> </body> </html>
bbspost.php文件代碼如下
<?php include("conn.php"); $title = $_POST["title"]; //獲取title $content = $_POST["content"]; //獲取content $username = $_POST["username"]; //獲取username $threadId = $_POST["threadid"]; //獲取threadid $sql="insert into bbs_post (title,content,username,threadid) " . "values ('$title','$content','$username','$threadId')"; mysql_query($sql); //傳回最后一次使用 INSERT 指令的 ID $responseId=mysql_insert_id(); echo $responseId; ?>
bbs.js文件里面包括了大量ajax文件,代碼如下
//先創(chuàng)建一個(gè)空的bbs.js文件,并修改其屬性為utf-8,才能保存中文。 var xmlHttp; //用于保存XMLHttpRequest對(duì)象的全局變量 var username; //用于保存姓名 var title; //用于保存標(biāo)題 var content; //用于保存內(nèi)容 var threadid; //用于保存主題編號(hào) //用于創(chuàng)建XMLHttpRequest對(duì)象 function createXmlHttp() { //根據(jù)window.XMLHttpRequest對(duì)象是否存在使用不同的創(chuàng)建方式 if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); //FireFox、Opera等瀏覽器支持的創(chuàng)建方式 } else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE瀏覽器支持的創(chuàng)建方式 } } //提交回帖到服務(wù)器 function submitPost() { //獲取帖子中姓名、標(biāo)題、內(nèi)容、主題編號(hào)四部分信息 username = document.getElementById("username").value; title = document.getElementById("post_title").value; content = document.getElementById("post_content").value; threadid = document.getElementById("threadid").value; if (checkForm()) { createXmlHttp(); //創(chuàng)建XMLHttpRequest對(duì)象 xmlHttp.onreadystatechange = submitPostCallBack; //設(shè)置回調(diào)函數(shù) xmlHttp.open("POST", "bbspost.php", true); //發(fā)送POST請(qǐng)求 //設(shè)置POST請(qǐng)求體類(lèi)型 xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlHttp.send("username=" + encodeURI(username) + "&title=" + encodeURI(title) + "&content=" + encodeURI(content) + "&threadid=" + threadid); //發(fā)送包含四個(gè)參數(shù)的請(qǐng)求體 } } //檢查表單是否內(nèi)容已填寫(xiě)完畢 function checkForm() { if (username == "") { alert("請(qǐng)?zhí)顚?xiě)姓名"); return false; } else if (title == "") { alert("請(qǐng)?zhí)顚?xiě)標(biāo)題"); return false; } else if (content == "") { alert("請(qǐng)?zhí)顚?xiě)內(nèi)容"); return false; } return true; } //獲取查詢選項(xiàng)的回調(diào)函數(shù) function submitPostCallBack() { if (xmlHttp.readyState == 4) { alert(xmlHttp.responseText); createNewPost(xmlHttp.responseText); } } //創(chuàng)建新的回帖 function createNewPost(postId) { //清空當(dāng)前表單中各部分信息 document.getElementById("post_title").value = ""; document.getElementById("post_content").value = ""; document.getElementById("username").value = ""; var postDiv = createDiv("post", ""); //創(chuàng)建回帖的外層div postDiv.id = "post" + postId; //給新div賦id值 var postTitleDiv = createDiv("post_title", title + " [" + username + "]"); //創(chuàng)建標(biāo)題div var postContentDiv = createDiv("post_content", "<pre>" + content + "</pre>"); //創(chuàng)建內(nèi)容div postDiv.appendChild(postTitleDiv); //在外層div追加標(biāo)題 postDiv.appendChild(postContentDiv); //在外層div追加內(nèi)容 document.getElementById("thread").appendChild(postDiv); //將外層div追加到主題div中 } //根據(jù)className和text創(chuàng)建新的div function createDiv(className, text) { var newDiv = document.createElement("div"); newDiv.className = className; newDiv.innerHTML = text; return newDiv; }
bbs.css文件如下:
/* 頁(yè)面基本樣式 */ body, td, input, textarea { font-family:Arial; font-size:12px; } /* 主題的樣式 */ #thread { border:1px solid black; width:300px; margin-bottom:10px; } /* 提示信息div的樣式 */ #statusDiv { border:1px solid #999; background:#FFFFCC; width:100px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -100px; width:280px; } /* 帖子的樣式 */ div.post { border-bottom:1px solid black; padding:5px; } /* 帖子title的樣式 */ div.post_title { border-bottom:1px dotted #0066CC; font-weight:bold; } /* 帖子content的樣式 */ div.post_content { font-size:12px; margin:5px; } /* 回帖表格基本樣式 */ table.reply { border-collapse:collapse; width:300px; } /* 回帖表格單元格樣式 */ table.reply td { border:1px solid black; padding:3px; } /* 回帖表格表頭樣式 */ table.reply td.title { background:#003366; color:#FFFFFF; } /* 表單元素樣式 */ input, textarea { border:1px solid black; } /* 文字區(qū)域樣式 */ textarea { width:200px; height:50px; } /* 預(yù)定義格式樣式 */ pre { margin:0; }
看完上述內(nèi)容,你們掌握如何在php中利用ajax實(shí)現(xiàn)一個(gè)無(wú)刷新的留言板功能的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。