Home > Article > Backend Development > Detailed explanation of the example of message board function implemented by Ajax and mysql data interaction
Detailed explanation of the example of message board function implemented by Ajax and mysql data interaction
- 小云云Original
- 2018-01-08 16:16:311553browse
This article mainly shares with you a detailed example of the message board function implemented by Ajax and MySQL data interaction. Recently, I made a small demo to realize the data interaction between Ajax and MySQL. The js part uses jq, and the background uses PHP. The database is mysql, and a node+MongoDB version will be available later.
I won’t go into details about the use and installation of mysql. Baidu xampp, Apache server and mysql database are integrated by myself, which is very easy to use.
First open the server and database. I established them here first. An "eleven" database, with a table called microblog created below (please note: I am using a higher version of mysql here, and the PHP database linking methods use mysqli_. If the version is too low, please use the mysql_ method. Modify the code yourself)
The following is the code part:
html page and js part:
<!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>
<p id="box">
<p id="head">
留言板
</p>
<p id="fill_in">
<textarea id="content"></textarea>
<button id="btn">提交留言</button>
</p>
<!--留言列表-->
<p id="message_text">
<ul class="list">
</ul>
</p>
<!--分页-->
<p id="page">
<a href="javasript:void(0)">1</a>
<a href="javasript:void(0)">2</a>
</p>
</p>
</body>
<script src="Jq/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").on("click",function(){
if ($("#content").val() == "") {
alert("~~客官，说一句再走呗~~Related recommendations:
Detailed explanation of Ajax and php data interaction
WeChat applet wx.request realizes background data interaction function analysis
Related data monitoring and A small example of data interaction
The above is the detailed content of Detailed explanation of the example of message board function implemented by Ajax and mysql data interaction. For more information, please follow other related articles on the PHP Chinese website!