標籤：show 非同步發送 方式 charset microsoft max free viewport res
實現的原理其實很簡單，我是用的原生js寫的，當然用jq封轉好的也都一樣(下次用jq寫個其他的)。解析都寫在代碼裡面了：
建表語句：
1 CREATE TABLE `comment` (2 `id` int NOT NULL AUTO_INCREMENT COMMENT ‘主鍵索引‘ ,3 `content` text NOT NULL COMMENT ‘評論內容‘ ,4 PRIMARY KEY (`id`)5 )ENGINE=MYISAM DEFAULT CHARSET=UTF86 ;comment.sql
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>秋田嘉-簡單的Ajax無重新整理評論</title> 9 </head>10 <body>11 <form onsubmit="return false;">12 <textarea placeholder="扯淡、吐槽、表揚、鼓勵.......想說啥就說啥" id="comment" name="comment" style="width: 400px;height:80px;"></textarea>13 <span id="msg" style="color: red;"></span>14 <p><button id="button">發表評論</button></p>15 </form>16 <pan id="msg2"></pan>17 <h2>18 評論列表：19 </h2>20 <div id="list">21 <?php22 // 以下是用mysqli操作資料庫，不瞭解的話請移步到我的《mysqli操作資料庫》這篇博文23 $mysqli = new Mysqli(‘localhost‘,‘root‘,‘admin‘,‘comment‘);24 $sql = "SELECT `content` FROM `comment`";25 $res = $mysqli->query($sql);26 if ($res){27 while($result = $res->fetch_array()){28 echo ‘<p style="微軟雅黑">‘.$result[‘content‘].‘</p><hr/>‘;29 }30 }31 $res->free();32 $mysqli->close();33 ?>34 </div>35 36 <script type="text/javascript">37 var xhr;38 if (window.XMLHttpRequest){ // 根據不同的瀏覽器版本，執行個體化XMLHttpRequest對象，用於發送http請求。39 xhr = new XMLHttpRequest(); // 主流瀏覽器40 }else {41 xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘); //IE5.5（laji）42 }43 // 尋找相應的節點元素，偷個懶都用ById44 var oTex = document.getElementById(‘comment‘); // 輸入框45 var oBut = document.getElementById(‘button‘); // 按鈕46 var oMsg = document.getElementById(‘msg‘); // 提示資訊47 var oList = document.getElementById(‘list‘); // 評論列表48 49 oBut.onclick = function () { // 監視發表評論按鈕點擊事件50 if (oTex.value === ‘‘){ // 簡單的判斷51 oMsg.style.color = ‘red‘;52 oMsg.innerText = ‘請填寫評論後在發表‘;53 return false;54 }55 xhr.open(‘post‘,‘comment.php‘); // 發送請求，第一個參數使用post方式，第二個參數是請求地址，第三個參數是否非同步發送，（布爾型）預設true56 xhr.setRequestHeader(‘Content-type‘,‘application/x-www-form-urlencoded‘);// 設定post發送頭資訊。如果方式的get則不需要。57 var data = "comment="+oTex.value; // 設定發送參數值。接收的時候就是這樣: $_POST[‘comment‘]; 如果是get發送方式，請直接在xhr.open()中把值拼接到請求地址url中。xhr.send()時不需要帶參數。58 xhr.send(data); // 發送。請求方式是get時，不用傳個參數、59 xhr.onreadystatechange = function () { // 監視狀態60 if (xhr.readyState == 4 && xhr.status == 200){ // ①獲得xhr對象的狀態：0 1 2 3 4（4表示請求已完成，直接判斷即可。其它的狀態原因詳情：見之後博文）②伺服器狀態 404 500 200（這個大家應該都懂）61 if (xhr.responseText){ // 在comment.php中我用的是輸入資料庫受影響的記錄，當你成功插入一條資料後，返回1，所以這裡直接做個判斷了。（這次用的是TEXT接收資料，算是偷個懶，下次用個數組或json接收，高端正規些）62 oMsg.innerText = ‘評論發表成功‘;63 oMsg.style.color = ‘#5194d2‘;64 var oP = document.createElement(‘p‘); // 添加節點，用於讓使用者即時看到自己的評論。65 var oHr = document.createElement(‘hr‘); // 同上66 oP.innerText = oTex.value; // 賦值67 oList.appendChild(oP); // 追加節點。（沒做評論倒敘查看。下次下次）68 oList.appendChild(oHr); // 同上69 oTex.value = ‘‘; // 初始化下值。70 }else{71 oMsg.innerText = ‘評論發表失敗‘;72 oMsg.innerText.style.color = ‘red‘;73 return false;74 }75 }76 }77 }78 79 </script>80 </body>81 </html>index.php
1 <?php 2 if (!isset ($_POST[‘comment‘])){ 3 header( "Location:./index.php"); 4 } 5 $mysqli = new Mysqli(‘localhost‘,‘root‘,‘admin‘,‘comment‘); 6 $content = addslashes(htmlspecialchars($_POST[‘comment‘])); 7 $sql = "INSERT INTO `comment` (`content`) VALUES (‘$content‘)"; 8 $res = $mysqli->query($sql); 9 if ($res){10 echo $mysqli->affected_rows;11 }12 $mysqli->close();13 ?>comment.php
php結合ajax實現簡單的無重新整理評論
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
