Ajax and mysql data interaction to create message board function
This article mainly introduces Ajax and mysql data interaction in detail to realize the message board function. It has certain reference value. Interested friends can refer to it.
I recently made a small The demo implements the data interaction between Ajax and MySQL. The js part uses jq, the backend uses php, and the database is mysql. A node mongodb version will be released later.
I won’t go into details about the use and installation of mysql. I integrate Baidu xampp, Apache server and mysql database by myself, which is very easy to use.
First open the server and database. I first created an "eleven" database here, and then created a table called microblog (please note: I am using a high version of mysql here, and PHP is linked to the database. All methods use mysqli_ If the version is too low, please use the mysql_ method and 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)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>
<a href="javasript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
</p>
</p>
</body>
<script src="Jq/jquery-3.1.1.min.js">
</html>Code display Not finished, here is part of the php code.
Continue with part 01, jq’s ajax request:
<script type="text/javascript">
$(function(){
$("#btn").on("click",function(){
if ($("#content").val() == "") {
alert("~~客官，说一句再走呗~~");
return;
}
else{
$.ajax({
type:"get",
url:"http://localhost/phpStudy/ajax03/message.php",
async:true,
dataType:"json",
data:{
content:$("#content").val(),
act:"add"
},
success:function(data){
// var result = JSON.parse(data);
if (data.error==0) {
createLi(data.id,$("#content").val(),data.time);
} else{
alert(data.msg);
}
}
});
}
});
//创建节点
function createLi(id,content,time){
var html = $('<li><p>'+content+'</p><p class="control"><span>时间：'+time+'</span>顶：<em>0</em>踩：<em>0</em><a class="remove" href="javasript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></p></li>');
$(".list").prepend(html);
var h = html.height();
html.height(0);
html.stop().animate({
height:h
},300);
//删除
html.find(".remove").on("click",function(){
html.stop().animate({
height:0
},300,function(){
html.remove();
})
});
}
})
</script>This part is the php code part:
<?php
header("Content-type:text/html;charset=utf8");
date_default_timezone_set("PRC");
//链接数据库
$link = mysqli_connect("localhost", "root", "", "eleven");
//设置数据库编码格式
mysqli_query($link, "set names utf8");
?>Note: I wrote this part as public code because I am learning to do other things is called, so the following code will have
include_once "comment.php";
. This line refers to other codes
0){
$arr = ["error"=>0,"id"=>$insertId,"time"=>$times];
echo json_encode($arr);//将数组转化为json，方便前端使用
}
else{
$arr = ["error"=>1,"msg"=>"留言失败，请重试!"];
echo json_encode($arr);//将数组转化为json，方便前端使用
}
break;
case 'up':
$id = $_GET['id'];
$search = "SELECT up FROM microblog WHERE id = $id";
$result = mysqli_query($link, $search);
$upNum = mysqli_fetch_row($result)[0];
$upNum++;
$query = "UPDATE microblog SET up='{$upNum}' WHERE id = '{$id}'";
mysqli_query($link,$query);
if(mysqli_affected_rows($link)){//更新数据成功
echo '{"error":"0"}';
}
else{//更新失败
echo '{"error":"1","msg":"点赞失败！"}';
}
break;
case 'down':
$id = $_GET['id'];
$search = "SELECT down FROM microblog WHERE id = $id";
$result = mysqli_query($link, $search);
$downNum = mysqli_fetch_row($result)[0];
$downNum++;
$query = "UPDATE microblog SET down='{$downNum}' WHERE id = '{$id}'";
mysqli_query($link,$query);
if(mysqli_affected_rows($link)){//更新数据成功
echo '{"error":"0"}';
}
else{//更新失败
echo '{"error":"1","msg":"踩失败！"}';
}
break;
case 'remove':
$id = $_GET['id'];
$query ="DELETE FROM microblog WHERE id='{$id}'";
mysqli_query($link,$query);
if(mysqli_affected_rows($link)>0){//删除数据成功
echo '{"error":"0"}';
}
else{
echo '{"error":"1","msg":"删除失败！"}';
}
break;
case 'count'://返回总页码
$query = "SELECT count(id) FROM microblog";
$result = mysqli_query($link, $query);
$count = mysqli_fetch_row($result)[0];//以索引数组形式返回查询结果
$countPage = ceil($count/5);
echo '{"error":"0","countPage":"'.$countPage.'"}';
break;
case 'page'://点击分页或者是页面第一次加载
$index = $_GET["num"]*5;
$search = "SELECT * FROM microblog ORDER BY id DESC LIMIT {$index},5";//倒叙查询留言
$result = mysqli_query($link, $search);
$arr = [];//存查询出来的数据
while($row = mysqli_fetch_assoc($result)){
array_unshift($arr,$row);
}
// print_r($arr);
// {"error":"0","info":[{},{},{},{},{}]}
$resultArr = ["error"=>"0","info"=>$arr];
echo json_encode($resultArr);
break;
}
?>. The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Instances of ajax responding to json strings and json arrays (graphic tutorial)
Ajax synchronization and asynchronous issues Brief analysis and solutions
Two methods for Ajax to solve redundant refresh
The above is the detailed content of Ajax and mysql data interaction to create message board function. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
MySQL: An Introduction to the World's Most Popular Database
Apr 12, 2025 am 12:18 AM
MySQL is an open source relational database management system, mainly used to store and retrieve data quickly and reliably. Its working principle includes client requests, query resolution, execution of queries and return results. Examples of usage include creating tables, inserting and querying data, and advanced features such as JOIN operations. Common errors involve SQL syntax, data types, and permissions, and optimization suggestions include the use of indexes, optimized queries, and partitioning of tables.
MySQL's Place: Databases and Programming
Apr 13, 2025 am 12:18 AM
MySQL's position in databases and programming is very important. It is an open source relational database management system that is widely used in various application scenarios. 1) MySQL provides efficient data storage, organization and retrieval functions, supporting Web, mobile and enterprise-level systems. 2) It uses a client-server architecture, supports multiple storage engines and index optimization. 3) Basic usages include creating tables and inserting data, and advanced usages involve multi-table JOINs and complex queries. 4) Frequently asked questions such as SQL syntax errors and performance issues can be debugged through the EXPLAIN command and slow query log. 5) Performance optimization methods include rational use of indexes, optimized query and use of caches. Best practices include using transactions and PreparedStatemen
Why Use MySQL? Benefits and Advantages
Apr 12, 2025 am 12:17 AM
MySQL is chosen for its performance, reliability, ease of use, and community support. 1.MySQL provides efficient data storage and retrieval functions, supporting multiple data types and advanced query operations. 2. Adopt client-server architecture and multiple storage engines to support transaction and query optimization. 3. Easy to use, supports a variety of operating systems and programming languages. 4. Have strong community support and provide rich resources and solutions.
How to connect to the database of apache
Apr 13, 2025 pm 01:03 PM
Apache connects to a database requires the following steps: Install the database driver. Configure the web.xml file to create a connection pool. Create a JDBC data source and specify the connection settings. Use the JDBC API to access the database from Java code, including getting connections, creating statements, binding parameters, executing queries or updates, and processing results.
How to start mysql by docker
Apr 15, 2025 pm 12:09 PM
The process of starting MySQL in Docker consists of the following steps: Pull the MySQL image to create and start the container, set the root user password, and map the port verification connection Create the database and the user grants all permissions to the database
MySQL's Role: Databases in Web Applications
Apr 17, 2025 am 12:23 AM
The main role of MySQL in web applications is to store and manage data. 1.MySQL efficiently processes user information, product catalogs, transaction records and other data. 2. Through SQL query, developers can extract information from the database to generate dynamic content. 3.MySQL works based on the client-server model to ensure acceptable query speed.
Laravel Introduction Example
Apr 18, 2025 pm 12:45 PM
Laravel is a PHP framework for easy building of web applications. It provides a range of powerful features including: Installation: Install the Laravel CLI globally with Composer and create applications in the project directory. Routing: Define the relationship between the URL and the handler in routes/web.php. View: Create a view in resources/views to render the application's interface. Database Integration: Provides out-of-the-box integration with databases such as MySQL and uses migration to create and modify tables. Model and Controller: The model represents the database entity and the controller processes HTTP requests.
How to install mysql in centos7
Apr 14, 2025 pm 08:30 PM
The key to installing MySQL elegantly is to add the official MySQL repository. The specific steps are as follows: Download the MySQL official GPG key to prevent phishing attacks. Add MySQL repository file: rpm -Uvh https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm Update yum repository cache: yum update installation MySQL: yum install mysql-server startup MySQL service: systemctl start mysqld set up booting
