Ajax與mysql數據交互實現留言板功能

來源：懂視網責編：小采時間：2020-11-27 22:51:50

Ajax與mysql數據交互實現留言板功能

Ajax與mysql數據交互實現留言板功能:最近自己做了一個小demo，實現了Ajax與MySQL的數據交互，js部分用的是jq，后臺用的是PHP，數據庫是mysql，過時間再來一個node+MongoDB版的。關于mysql的使用和安裝，就不多講了，自行百度xampp，Apache服務器和mysql數據庫集成，非常好用首先打開服

推薦度：

點擊下載本文 文檔為doc格式

導讀Ajax與mysql數據交互實現留言板功能:最近自己做了一個小demo，實現了Ajax與MySQL的數據交互，js部分用的是jq，后臺用的是PHP，數據庫是mysql，過時間再來一個node+MongoDB版的。關于mysql的使用和安裝，就不多講了，自行百度xampp，Apache服務器和mysql數據庫集成，非常好用首先打開服

最近自己做了一個小demo，實現了Ajax與MySQL的數據交互，js部分用的是jq，后臺用的是PHP，數據庫是mysql，過時間再來一個node+MongoDB版的。

關于mysql的使用和安裝，就不多講了，自行百度xampp，Apache服務器和mysql數據庫集成，非常好用

首先打開服務器和數據庫，我這里先建立了一個“eleven”的數據庫，下面建立了一個叫做microblog的表（請注意：我這里使用的是高版本的mysql，里面php鏈接數據庫的方法使用的都是mysqli_ 如果版本過低，請使用mysql_ 方法，自行修改代碼）
以下是代碼部分：

html頁面和js部分：

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title>微博留言板</title> 
 <style type="text/css"> 
 *{ 
 margin: 0; 
 padding: 0; 
 } 
 #box{ 
 width: 600px; 
 /*height: 500px;*/ 
 border: 2px solid rgb(85,85,85); 
 border-radius: 15px; 
 margin: 50px auto; 
 padding: 20px 10px 15px; 
 background-color: rgb(85,85,85); 
 } 
 #content{ 
 display: block; 
 resize: none; 
 width: 550px; 
 height: 200px; 
 margin: 0 auto; 
 border: 2px solid rgb(225,225,225); 
 border-radius: 10px; 
 text-align: center; 
 font-size: 30px; 
 background-color: rgb(225,225,225); 
 } 
 #content:focus{ 
 outline: none; 
 border: 2px solid rgb(225,225,225); 
 box-shadow: 0 0 15px rgb(225,225,225); 
 } 
 #btn{ 
 border: 2px solid rgb(255,204,0); 
 width: 80px; 
 height: 40px; 
 border-radius: 5px; 
 margin-top: 30px; 
 font-size: 17px; 
 cursor: pointer; 
 outline: none; 
 background-color: rgb(255,204,0); 
 } 
 .list{ 
 list-style: none; 
 background-color: rgb(249,249,249); 
 margin-top: 20px; 
 } 
 .list>li{ 
 padding: 20px 10px 10px; 
 border-bottom: 2px solid rgb(68,68,68); 
 font-size: 20px; 
 color: rgb(200,214,225); 
 position: relative; 
 word-break: break-word; 
 word-wrap: break-word; 
 background-color: rgb(85,85,85); 
 } 
 .list>li>.control{ 
 position: absolute; 
 bottom: 3px; 
 right: 5px; 
 font-size: 14px; 
 } 
 .list>li>p{ 
 margin-bottom: 25px; 
 } 
 .control span,.control em{ 
 display: inline-block; 
 margin-right: 15px; 
 } 
 .control em{ 
 color: darkblue; 
 cursor: pointer; 
 } 
 a{ 
 text-decoration: none; 
 color: darkred; 
 } 
 #page>a{ 
 display:inline-block; 
 width: 40px; 
 height: 30px; 
 margin-top: 10px; 
 text-align: center; 
 line-height: 30px; 
 font-size: 20px; 
 border-radius: 5px; 
 color: white; 
 background-color: rgb(51,21,70); 
 } 
 #head{ 
 color: rgb(200,214,225); 
 font-size: 30px; 
 height: 50px; 
 border-bottom: 2px solid rgb(68,68,68); 
 margin-bottom: 20px; 
 } 
 </style> 
 </head> 
 <body> 
 <div id="box"> 
 <div id="head"> 
 留言板 
 </div> 
 <div id="fill_in"> 
 <textarea id="content"></textarea> 
 <button id="btn">提交留言</button> 
 </div> 
 <!--留言列表--> 
 <div id="message_text"> 
 <ul class="list"> 
 </ul> 
 </div> 
 <!--分頁--> 
 <div id="page"> 
 <a href="javasript:void(0)">1</a> 
 <a href="javasript:void(0)">2</a> 
 </div> 
 </div> 
 </body> 
 <script src="Jq/jquery-3.1.1.min.js"></script> 
 <script type="text/javascript"> 
 $(function(){ 
 $("#btn").on("click",function(){ 
 if ($("#content").val() == "") { 
 alert("~~客官，說一句再走唄~~

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Ajax與mysql數據交互實現留言板功能

推薦度：

點擊下載本文 文檔為doc格式

標簽：留言板 mysql 數據交互

熱門焦點

Ajax與mysql數據交互實現留言板功能

Ajax與mysql數據交互實現留言板功能

Ajax與mysql數據交互實現留言板功能

最新推薦

猜你喜歡

熱門推薦