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

2016-12-22 21:18:31来源:CSDN作者:sexy_squirrel人点击

最近自己做了一个小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部分代码,请原谅分两篇!

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台