时间:2021-07-01 10:21:17 帮助过:63人阅读
最近自己做了一个小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)" 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>
- </div>
- </div>
- </body>
- <script src="Jq/jquery-3.1.1.min.js">
- </html>
代码显示不完,下面是php部分代码。
接01部分,jq的ajax请求:
- <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><div 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></div></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>
这部分是php代码部分:
- <?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");
- ?>
注意:这部分我写成了公共代码,因为我在学习做其他东西时调用了,所以下面的代码会有
- include_once "comment.php";
这一行是引用其他代码
- <?php
- /*
- * 开发文档
- * 1.用于提交的留言留言进行存储
- * url:http://localhost/phpStudy/ajax03/message.php
- * 提交方式:get
- * 提交参数说明:
- * content 必须 留言板内容
- * act 必须 借口标识
- * 返回参数说明
- * 成功:{"error":"0","id":1,"time":"2016-11-30"}
- * 失败:{"error":1,"msg":"留言失败,请重试"}
- *
- * 2.up
- * id 必须 留言的id编号
- * act 必须 接口标识 up
- * 返回声明
- * 成功:{"error":"0"}
- * 失败:{"error":"1","msg":"点赞失败"}
- *
- * 3.分页(获取页码的接口);
- * act 必须 接口标识 count
- * 返回参数说明:
- * 成功:{"error":"0","countPage":"3"};
- * 失败:{"error":"1","msg":"请求数据失败,请重试!"}
- *
- * 4.分页(点击页码跳转)
- * url:http://localhost/phpStudy/ajax03/message.php
- * 提交方式:get
- * 提交参数说明:
- * starPage 必须参数 页码索引值
- * act 必须 接口标识 page
- * 返回参数说明
- * 成功:{"error":"0","data":[{},{},{},{},{}]}
- * 失败:{"error":"1","msg":"数据查询失败,请重试!"}
- *
- */
- include_once "comment.php";
- $act = $_GET["act"];//接口请求标识
- switch ($act) {
- case 'add'://提交留言
- $content = $_GET["content"];
- $time = time();
- $times = date("Y-m-d H:i:s",$time);
- $query = "INSERT INTO microblog(id,content,time) VALUES(null,'{$content}','{$times}')";
- mysqli_query($link,$query);
- $insertId = mysqli_insert_id($link);
- if($insertId>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;
- }
- ?>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。