suchen

Heim >Backend-Entwicklung >PHP-Tutorial >Ajax- und MySQL-Dateninteraktion zur Implementierung der Message-Board-Funktion. Beispiel für detaillierte Erklärung

Ajax- und MySQL-Dateninteraktion zur Implementierung der Message-Board-Funktion. Beispiel für detaillierte Erklärung

小云云
小云云Original
2018-01-08 16:16:311582Durchsuche

Dieser Artikel zeigt Ihnen hauptsächlich ein detailliertes Beispiel für die von Ajax und MySQL implementierte Dateninteraktion. Kürzlich habe ich eine kleine Demo erstellt, um die Dateninteraktion zwischen Ajax und MySQL zu realisieren Der Hintergrund ist PHP. Die Datenbank ist MySQL und eine Node+MongoDB-Version wird später verfügbar sein.

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

Öffnen Sie zuerst den Server und Ich habe sie hier zuerst erstellt, mit einer Tabelle namens Microblog, die unten erstellt wurde (bitte beachten Sie: Ich verwende hier eine höhere Version von MySQL und die PHP-Datenbankverknüpfungsmethode verwendet mysqli_. Wenn die Version zu niedrig ist , bitte verwenden Sie die mysql_-Methode. Ä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)">1</a> 
        <a href="javasript:void(0)">2</a> 
      </p> 
    </p> 
  </body> 
  <script src="Jq/jquery-3.1.1.min.js"></script> 
  <script type="text/javascript"> 
    $(function(){ 
      $("#btn").on("click",function(){ 
        if ($("#content").val() == "") { 
          alert("~~客官，说一句再走呗~~

Verwandte Empfehlungen:

Detaillierte Erläuterung der Ajax- und PHP-Dateninteraktion

Das WeChat-Applet wx.request realisiert die Funktionsanalyse der Hintergrunddateninteraktion

Relevante Daten in vue Ein kleines Beispiel für Überwachung und Dateninteraktion

Das obige ist der detaillierte Inhalt vonAjax- und MySQL-Dateninteraktion zur Implementierung der Message-Board-Funktion. Beispiel für detaillierte Erklärung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php mysql ajax html JS mongodb 数据库 apache 微信小程序
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：Beispiel-Tutorial zur Ajax-Implementierung eines simulierten intelligenten Keyword-Matching-SucheffektsNächster Artikel：Beispiel-Tutorial zur Ajax-Implementierung eines simulierten intelligenten Keyword-Matching-Sucheffekts

In Verbindung stehende Artikel

Mehr sehen