suchen

Heim  >  Artikel  >  Web-Frontend  >  Ajax+MySQL erstellt Message-Board-Funktion

Ajax+MySQL erstellt Message-Board-Funktion

php中世界最好的语言
php中世界最好的语言Original
2018-04-02 14:58:101907Durchsuche

Dieses Mal werde ich Ihnen die Funktion zum Erstellen eines Message Boards mit Ajax + MySQL vorstellen. Was sind die Vorsichtsmaßnahmen zum Erstellen eines Message Boards mit Ajax + MySQL? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Kürzlich habe ich eine kleine Demo erstellt, um die Dateninteraktion zwischen Ajax und MySQL zu realisieren. Der js-Teil verwendet jq, das Backend verwendet PHP und die Datenbank ist MySQL.

Ich werde nicht näher auf die Verwendung und Installation von MySQL eingehen. Ich integriere Baidu xampp, den Apache-Server und die MySQL-Datenbank selbst, was sehr einfach zu verwenden ist.

Öffnen Sie zuerst den Server und die Datenbank. Ich habe hier zuerst eine „elf“-Datenbank erstellt und dann eine Tabelle namens Microblog erstellt (bitte beachten Sie: Ich verwende hier eine höhere Version von MySQL, die PHP zum Verlinken verwendet Die Datenbank. Alle Methoden verwenden mysqli_. Wenn die Version zu niedrig ist, verwenden Sie bitte die mysql_-Methode und ändern Sie den Code selbst.)
Das Folgende ist der Codeteil:

HTML-Seite und JS-Teil: 

<!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>

Der Code kann nicht vollständig angezeigt werden, das Folgende ist Teil des PHP-Codes.
Fahren Sie mit Teil 01 fort, der Ajax-Anfrage von jq: 

<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>

Dieser Teil ist der PHP-Code-Teil: 

<?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"); 
?>

Hinweis: Ich habe diesen Teil als öffentlichen Code geschrieben, weil ich es bin Es wird aufgerufen, wenn man lernt, andere Dinge zu tun, daher hat der folgende Code 

include_once "comment.php";

Diese Zeile bezieht sich auf andere Codes 

<?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 &#39;add&#39;://提交留言 
      $content = $_GET["content"]; 
      $time = time(); 
      $times = date("Y-m-d H:i:s",$time); 
      $query = "INSERT INTO microblog(id,content,time) VALUES(null,&#39;{$content}&#39;,&#39;{$times}&#39;)"; 
      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; 
     
   } 
?>

Ich glaube, Sie haben die Methode nach dem Lesen gemeistert Fall in diesem Artikel und mehr. Wie aufregend, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Was ist der Unterschied zwischen Synchronisierung und asynchroner Implementierung mit Ajax?

AJAX Cross-Domain Request JSONP um JSON-Daten zu erhalten. Detaillierte Erklärung der Schritte (mit Code)

Das obige ist der detaillierte Inhalt vonAjax+MySQL erstellt Message-Board-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Angular-Entwicklungspraxis (4): Interaktion zwischen KomponentenNächster Artikel：Angular-Entwicklungspraxis (4): Interaktion zwischen Komponenten

In Verbindung stehende Artikel

Mehr sehen