Web-Frontend
js-Tutorial
Ajax- und MySQL-Dateninteraktion zum Erstellen einer Message-Board-Funktion
Ajax- und MySQL-Dateninteraktion zum Erstellen einer Message-Board-Funktion
Dieser Artikel stellt hauptsächlich die Ajax- und MySQL-Dateninteraktion im Detail vor, um die Message-Board-Funktion zu realisieren. Es hat einen gewissen Referenzwert.
Ich habe kürzlich eine kleine Demo erstellt, die die Dateninteraktion implementiert zwischen Ajax und MySQL. Der js-Teil verwendet jq, das Backend verwendet PHP und die Datenbank ist MySQL. Ich werde später eine Node+Mongodb-Version erstellen.
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>Codeanzeige Noch nicht fertig, hier ist ein 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 lerne, andere Dinge zu tun Der folgende Code wird also aufgerufen:
include_once "comment.php";
. Diese Zeile bezieht sich auf andere Codes, die ich für alle zusammengestellt habe die Zukunft.
Verwandte Artikel:
Ajax-Antwort auf JSON-String- und JSON-Array-Beispiele (grafisches Tutorial) Ajax-Synchronisierung und asynchrone Probleme Kurze Analyse und LösungenZwei Methoden für Ajax, um redundante Aktualisierungen zu lösenDas obige ist der detaillierte Inhalt vonAjax- und MySQL-Dateninteraktion zum Erstellen einer Message-Board-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
Die Beziehung zwischen MySQL -Benutzer und Datenbank
Apr 08, 2025 pm 07:15 PM
In der MySQL -Datenbank wird die Beziehung zwischen dem Benutzer und der Datenbank durch Berechtigungen und Tabellen definiert. Der Benutzer verfügt über einen Benutzernamen und ein Passwort, um auf die Datenbank zuzugreifen. Die Berechtigungen werden über den Zuschussbefehl erteilt, während die Tabelle durch den Befehl create table erstellt wird. Um eine Beziehung zwischen einem Benutzer und einer Datenbank herzustellen, müssen Sie eine Datenbank erstellen, einen Benutzer erstellen und dann Berechtigungen erfüllen.
MySQL: Die einfache Datenverwaltung für Anfänger
Apr 09, 2025 am 12:07 AM
MySQL ist für Anfänger geeignet, da es einfach zu installieren, leistungsfähig und einfach zu verwalten ist. 1. Einfache Installation und Konfiguration, geeignet für eine Vielzahl von Betriebssystemen. 2. Unterstützung grundlegender Vorgänge wie Erstellen von Datenbanken und Tabellen, Einfügen, Abfragen, Aktualisieren und Löschen von Daten. 3. Bereitstellung fortgeschrittener Funktionen wie Join Operations und Unterabfragen. 4. Die Leistung kann durch Indexierung, Abfrageoptimierung und Tabellenpartitionierung verbessert werden. 5. Backup-, Wiederherstellungs- und Sicherheitsmaßnahmen unterstützen, um die Datensicherheit und -konsistenz zu gewährleisten.
RDS MySQL -Integration mit RedShift Zero ETL
Apr 08, 2025 pm 07:06 PM
Vereinfachung der Datenintegration: AmazonRDSMYSQL und Redshifts Null ETL-Integration Die effiziente Datenintegration steht im Mittelpunkt einer datengesteuerten Organisation. Herkömmliche ETL-Prozesse (Extrakt, Konvertierung, Last) sind komplex und zeitaufwändig, insbesondere bei der Integration von Datenbanken (wie AmazonRDSMysQL) in Data Warehouses (wie Rotverschiebung). AWS bietet jedoch keine ETL-Integrationslösungen, die diese Situation vollständig verändert haben und eine vereinfachte Lösung für die Datenmigration von RDSMysQL zu Rotverschiebung bietet. Dieser Artikel wird in die Integration von RDSMYSQL Null ETL mit RedShift eintauchen und erklärt, wie es funktioniert und welche Vorteile es Dateningenieuren und Entwicklern bringt.
So füllen Sie MySQL Benutzername und Passwort aus
Apr 08, 2025 pm 07:09 PM
Ausfüllen des MySQL -Benutzernamens und des Kennworts: 1. Bestimmen Sie den Benutzernamen und das Passwort; 2. Verbinden Sie eine Verbindung zur Datenbank; 3. Verwenden Sie den Benutzernamen und das Passwort, um Abfragen und Befehle auszuführen.
Die Abfrageoptimierung in MySQL ist für die Verbesserung der Datenbankleistung von wesentlicher Bedeutung, insbesondere im Umgang mit großen Datensätzen
Apr 08, 2025 pm 07:12 PM
1. Verwenden Sie den richtigen Index, um das Abrufen von Daten zu beschleunigen, indem die Menge der skanierten Datenmenge ausgewählt wird. Wenn Sie mehrmals eine Spalte einer Tabelle nachschlagen, erstellen Sie einen Index für diese Spalte. Wenn Sie oder Ihre App Daten aus mehreren Spalten gemäß den Kriterien benötigen, erstellen Sie einen zusammengesetzten Index 2. Vermeiden Sie aus. Auswählen * Nur die erforderlichen Spalten. Wenn Sie alle unerwünschten Spalten auswählen, konsumiert dies nur mehr Serverspeicher und veranlasst den Server bei hoher Last oder Frequenzzeiten, beispielsweise die Auswahl Ihrer Tabelle, wie beispielsweise die Spalten wie innovata und updated_at und Zeitsteuer und dann zu entfernen.
Verstehen von Säureeigenschaften: Die Säulen einer zuverlässigen Datenbank
Apr 08, 2025 pm 06:33 PM
Detaillierte Erläuterung von Datenbanksäureattributen Säureattribute sind eine Reihe von Regeln, um die Zuverlässigkeit und Konsistenz von Datenbanktransaktionen sicherzustellen. Sie definieren, wie Datenbanksysteme Transaktionen umgehen, und sorgen dafür, dass die Datenintegrität und -genauigkeit auch im Falle von Systemabstürzen, Leistungsunterbrechungen oder mehreren Benutzern gleichzeitiger Zugriff. Säureattributübersicht Atomizität: Eine Transaktion wird als unteilbare Einheit angesehen. Jeder Teil schlägt fehl, die gesamte Transaktion wird zurückgerollt und die Datenbank behält keine Änderungen bei. Wenn beispielsweise eine Banküberweisung von einem Konto abgezogen wird, jedoch nicht auf ein anderes erhöht wird, wird der gesamte Betrieb widerrufen. begintransaktion; updateAccountsSetBalance = Balance-100WH
Kann ich das Datenbankkennwort in Navicat abrufen?
Apr 08, 2025 pm 09:51 PM
Navicat selbst speichert das Datenbankkennwort nicht und kann das verschlüsselte Passwort nur abrufen. Lösung: 1. Überprüfen Sie den Passwort -Manager. 2. Überprüfen Sie Navicats "Messnot Password" -Funktion; 3.. Setzen Sie das Datenbankkennwort zurück; 4. Kontaktieren Sie den Datenbankadministrator.
Master SQL Limit -Klausel: Steuern Sie die Anzahl der Zeilen in einer Abfrage
Apr 08, 2025 pm 07:00 PM
SQllimit -Klausel: Steuern Sie die Anzahl der Zeilen in Abfrageergebnissen. Die Grenzklausel in SQL wird verwendet, um die Anzahl der von der Abfrage zurückgegebenen Zeilen zu begrenzen. Dies ist sehr nützlich, wenn große Datensätze, paginierte Anzeigen und Testdaten verarbeitet werden und die Abfrageeffizienz effektiv verbessern können. Grundlegende Syntax der Syntax: SelectColumn1, Spalte2, ... Fromtable_Namelimitnumber_of_rows; number_of_rows: Geben Sie die Anzahl der zurückgegebenen Zeilen an. Syntax mit Offset: SelectColumn1, Spalte2, ... Fromtable_NamelimitOffset, Number_of_rows; Offset: Skip überspringen
