留言板------Ajax与mysql数据交互01

最新推荐文章于 2024-07-22 16:42:40 发布

sexy_squirrel

最新推荐文章于 2024-07-22 16:42:40 发布

阅读量940

点赞数 1

分类专栏：后端编程 Ajax与php 文章标签： php Ajax mysql 微博留言板数据展示分页

本文链接：https://blog.csdn.net/sexy_squirrel/article/details/53790491

版权

后端编程同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Ajax与php

2 篇文章 0 订阅

订阅专栏

最近自己做了一个小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">
</html>

代码显示不完，下一篇是php部分代码，请原谅分两篇！

sexy_squirrel

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
留言板------Ajax与mysql数据交互01

最近自己做了一个小demo，实现了Ajax与mysql的数据交互，js部分用的是jq，后台用的是php，数据库是mysql，过时间再来一个node+mongodb版的。关于mysql的使用和安装，就不多讲了，自行百度xampp，Apache服务器和mysql数据库集成，非常好用首先打开服务器和数据库，我这里先建立了一个“eleven”的数据库，下面建立了一个叫做microblog的表（请注
复制链接

扫一扫

专栏目录