当前位置:Gxlcms > AJAX > Ajax与mysql数据交互制作留言板功能(全)

Ajax与mysql数据交互制作留言板功能(全)

时间: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部分:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>微博留言板</title>
  6. <style type="text/css">
  7. *{
  8. margin: 0;
  9. padding: 0;
  10. }
  11. #box{
  12. width: 600px;
  13. /*height: 500px;*/
  14. border: 2px solid rgb(85,85,85);
  15. border-radius: 15px;
  16. margin: 50px auto;
  17. padding: 20px 10px 15px;
  18. background-color: rgb(85,85,85);
  19. }
  20. #content{
  21. display: block;
  22. resize: none;
  23. width: 550px;
  24. height: 200px;
  25. margin: 0 auto;
  26. border: 2px solid rgb(225,225,225);
  27. border-radius: 10px;
  28. text-align: center;
  29. font-size: 30px;
  30. background-color: rgb(225,225,225);
  31. }
  32. #content:focus{
  33. outline: none;
  34. border: 2px solid rgb(225,225,225);
  35. box-shadow: 0 0 15px rgb(225,225,225);
  36. }
  37. #btn{
  38. border: 2px solid rgb(255,204,0);
  39. width: 80px;
  40. height: 40px;
  41. border-radius: 5px;
  42. margin-top: 30px;
  43. font-size: 17px;
  44. cursor: pointer;
  45. outline: none;
  46. background-color: rgb(255,204,0);
  47. }
  48. .list{
  49. list-style: none;
  50. background-color: rgb(249,249,249);
  51. margin-top: 20px;
  52. }
  53. .list>li{
  54. padding: 20px 10px 10px;
  55. border-bottom: 2px solid rgb(68,68,68);
  56. font-size: 20px;
  57. color: rgb(200,214,225);
  58. position: relative;
  59. word-break: break-word;
  60. word-wrap: break-word;
  61. background-color: rgb(85,85,85);
  62. }
  63. .list>li>.control{
  64. position: absolute;
  65. bottom: 3px;
  66. right: 5px;
  67. font-size: 14px;
  68. }
  69. .list>li>p{
  70. margin-bottom: 25px;
  71. }
  72. .control span,.control em{
  73. display: inline-block;
  74. margin-right: 15px;
  75. }
  76. .control em{
  77. color: darkblue;
  78. cursor: pointer;
  79. }
  80. a{
  81. text-decoration: none;
  82. color: darkred;
  83. }
  84. #page>a{
  85. display:inline-block;
  86. width: 40px;
  87. height: 30px;
  88. margin-top: 10px;
  89. text-align: center;
  90. line-height: 30px;
  91. font-size: 20px;
  92. border-radius: 5px;
  93. color: white;
  94. background-color: rgb(51,21,70);
  95. }
  96. #head{
  97. color: rgb(200,214,225);
  98. font-size: 30px;
  99. height: 50px;
  100. border-bottom: 2px solid rgb(68,68,68);
  101. margin-bottom: 20px;
  102. }
  103. </style>
  104. </head>
  105. <body>
  106. <div id="box">
  107. <div id="head">
  108. 留言板
  109. </div>
  110. <div id="fill_in">
  111. <textarea id="content"></textarea>
  112. <button id="btn">提交留言</button>
  113. </div>
  114. <!--留言列表-->
  115. <div id="message_text">
  116. <ul class="list">
  117. </ul>
  118. </div>
  119. <!--分页-->
  120. <div id="page">
  121. <a href="javasript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>
  122. <a href="javasript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
  123. </div>
  124. </div>
  125. </body>
  126. <script src="Jq/jquery-3.1.1.min.js">
  127. </html>

代码显示不完,下面是php部分代码。
接01部分,jq的ajax请求:

  1. <script type="text/javascript">
  2. $(function(){
  3. $("#btn").on("click",function(){
  4. if ($("#content").val() == "") {
  5. alert("~~客官,说一句再走呗~~");
  6. return;
  7. }
  8. else{
  9. $.ajax({
  10. type:"get",
  11. url:"http://localhost/phpStudy/ajax03/message.php",
  12. async:true,
  13. dataType:"json",
  14. data:{
  15. content:$("#content").val(),
  16. act:"add"
  17. },
  18. success:function(data){
  19. // var result = JSON.parse(data);
  20. if (data.error==0) {
  21. createLi(data.id,$("#content").val(),data.time);
  22. } else{
  23. alert(data.msg);
  24. }
  25. }
  26. });
  27. }
  28. });
  29. //创建节点
  30. function createLi(id,content,time){
  31. 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>');
  32. $(".list").prepend(html);
  33. var h = html.height();
  34. html.height(0);
  35. html.stop().animate({
  36. height:h
  37. },300);
  38. //删除
  39. html.find(".remove").on("click",function(){
  40. html.stop().animate({
  41. height:0
  42. },300,function(){
  43. html.remove();
  44. })
  45. });
  46. }
  47. })
  48. </script>

这部分是php代码部分:

  1. <?php
  2. header("Content-type:text/html;charset=utf8");
  3. date_default_timezone_set("PRC");
  4. //链接数据库
  5. $link = mysqli_connect("localhost", "root", "", "eleven");
  6. //设置数据库编码格式
  7. mysqli_query($link, "set names utf8");
  8. ?>

注意:这部分我写成了公共代码,因为我在学习做其他东西时调用了,所以下面的代码会有

  1. include_once "comment.php";

这一行是引用其他代码

  1. <?php
  2. /*
  3. * 开发文档
  4. * 1.用于提交的留言留言进行存储
  5. * url:http://localhost/phpStudy/ajax03/message.php
  6. * 提交方式:get
  7. * 提交参数说明:
  8. * content 必须 留言板内容
  9. * act 必须 借口标识
  10. * 返回参数说明
  11. * 成功:{"error":"0","id":1,"time":"2016-11-30"}
  12. * 失败:{"error":1,"msg":"留言失败,请重试"}
  13. *
  14. * 2.up
  15. * id 必须 留言的id编号
  16. * act 必须 接口标识 up
  17. * 返回声明
  18. * 成功:{"error":"0"}
  19. * 失败:{"error":"1","msg":"点赞失败"}
  20. *
  21. * 3.分页(获取页码的接口);
  22. * act 必须 接口标识 count
  23. * 返回参数说明:
  24. * 成功:{"error":"0","countPage":"3"};
  25. * 失败:{"error":"1","msg":"请求数据失败,请重试!"}
  26. *
  27. * 4.分页(点击页码跳转)
  28. * url:http://localhost/phpStudy/ajax03/message.php
  29. * 提交方式:get
  30. * 提交参数说明:
  31. * starPage 必须参数 页码索引值
  32. * act 必须 接口标识 page
  33. * 返回参数说明
  34. * 成功:{"error":"0","data":[{},{},{},{},{}]}
  35. * 失败:{"error":"1","msg":"数据查询失败,请重试!"}
  36. *
  37. */
  38. include_once "comment.php";
  39. $act = $_GET["act"];//接口请求标识
  40. switch ($act) {
  41. case 'add'://提交留言
  42. $content = $_GET["content"];
  43. $time = time();
  44. $times = date("Y-m-d H:i:s",$time);
  45. $query = "INSERT INTO microblog(id,content,time) VALUES(null,'{$content}','{$times}')";
  46. mysqli_query($link,$query);
  47. $insertId = mysqli_insert_id($link);
  48. if($insertId>0){
  49. $arr = ["error"=>0,"id"=>$insertId,"time"=>$times];
  50. echo json_encode($arr);//将数组转化为json,方便前端使用
  51. }
  52. else{
  53. $arr = ["error"=>1,"msg"=>"留言失败,请重试!"];
  54. echo json_encode($arr);//将数组转化为json,方便前端使用
  55. }
  56. break;
  57. case 'up':
  58. $id = $_GET['id'];
  59. $search = "SELECT up FROM microblog WHERE id = $id";
  60. $result = mysqli_query($link, $search);
  61. $upNum = mysqli_fetch_row($result)[0];
  62. $upNum++;
  63. $query = "UPDATE microblog SET up='{$upNum}' WHERE id = '{$id}'";
  64. mysqli_query($link,$query);
  65. if(mysqli_affected_rows($link)){//更新数据成功
  66. echo '{"error":"0"}';
  67. }
  68. else{//更新失败
  69. echo '{"error":"1","msg":"点赞失败!"}';
  70. }
  71. break;
  72. case 'down':
  73. $id = $_GET['id'];
  74. $search = "SELECT down FROM microblog WHERE id = $id";
  75. $result = mysqli_query($link, $search);
  76. $downNum = mysqli_fetch_row($result)[0];
  77. $downNum++;
  78. $query = "UPDATE microblog SET down='{$downNum}' WHERE id = '{$id}'";
  79. mysqli_query($link,$query);
  80. if(mysqli_affected_rows($link)){//更新数据成功
  81. echo '{"error":"0"}';
  82. }
  83. else{//更新失败
  84. echo '{"error":"1","msg":"踩失败!"}';
  85. }
  86. break;
  87. case 'remove':
  88. $id = $_GET['id'];
  89. $query ="DELETE FROM microblog WHERE id='{$id}'";
  90. mysqli_query($link,$query);
  91. if(mysqli_affected_rows($link)>0){//删除数据成功
  92. echo '{"error":"0"}';
  93. }
  94. else{
  95. echo '{"error":"1","msg":"删除失败!"}';
  96. }
  97. break;
  98. case 'count'://返回总页码
  99. $query = "SELECT count(id) FROM microblog";
  100. $result = mysqli_query($link, $query);
  101. $count = mysqli_fetch_row($result)[0];//以索引数组形式返回查询结果
  102. $countPage = ceil($count/5);
  103. echo '{"error":"0","countPage":"'.$countPage.'"}';
  104. break;
  105. case 'page'://点击分页或者是页面第一次加载
  106. $index = $_GET["num"]*5;
  107. $search = "SELECT * FROM microblog ORDER BY id DESC LIMIT {$index},5";//倒叙查询留言
  108. $result = mysqli_query($link, $search);
  109. $arr = [];//存查询出来的数据
  110. while($row = mysqli_fetch_assoc($result)){
  111. array_unshift($arr,$row);
  112. }
  113. // print_r($arr);
  114. // {"error":"0","info":[{},{},{},{},{}]}
  115. $resultArr = ["error"=>"0","info"=>$arr];
  116. echo json_encode($resultArr);
  117. break;
  118. }
  119. ?>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

人气教程排行