Web-Frontend
js-Tutorial
So implementieren Sie eine Kartenschnittstelle mithilfe der Datenbank + Ajax-Methode
So implementieren Sie eine Kartenschnittstelle mithilfe der Datenbank + Ajax-Methode
Dieses Mal zeige ich Ihnen, wie Sie die Kartenschnittstelle mit der Datenbank + Ajax-Methode implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung der Kartenschnittstelle mit der Datenbank + Ajax-Methode? Hier ist ein praktischer Fall.
Ajax-Tutorial
AJAX = Asynchrones JavaScript und XML (asynchrones JavaScript und XML).
AJAX ist keine neue Programmiersprache, sondern eine neue Art, bestehende Standards zu nutzen.
AJAX ist die Kunst, Daten mit einem Server auszutauschen und Teile einer Webseite zu aktualisieren, ohne die gesamte Seite neu zu laden.
Client-Teil: HTML, JS, CSS-Code-Teil:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta charset="UTF-8"/>
</head>
<!--css样式部分-->
<style type="text/css">
.content_map{
/*border:1px solid blue;*/
width:1349px;
height:524px;
float:left;
margin-top:100px;
}
.content_map .mLeft{
border:none;
border-top:1px solid #fb6c20;
width:400px;
margin-top:14px;
float:left;
margin-left:134px;
}
.content_map>span{
margin-left:20px;
margin-right:20px;
font-size:28px;
font-family: "Microsoft Yahei";
/*font-weight: bold;*/
float:left;
}
.content_map .mRight{
float:left;
border:none;
border-top:1px solid #fb6c20;
width:400px;
margin-top:14px;
}
#maplist{
margin-top:50px;
width:749px;
height:524px;
/*border:1px solid #fb6c20;*/
background: url("images/diru.png") no-repeat 0 0 ;
background-size:contain;
position: relative;
float:left;
}
.mapShop img{
position:absolute;
/*border:1px solid red;*/
}
#map_right{
/*border:1px solid #fb6c20;*/
float:left;
/*width:600px;*/
width:594px;
height:524px;
background-color: #f0f2fe;
margin-top: 40px;
}
.shopMsg img{
width:450px;
height:300px;
margin-left:72px;
margin-top:40px;
}
.shopMsg .pmname{
color:#000;
font-size:20px;
margin-top:30px;
margin-left:72px;
font-family:微软雅黑;
}
.shopMsg .address{
color:#000;
font-size:20px;
margin-top:30px;
margin-left:72px;
font-family:微软雅黑;
}
.shopMsg .phone{
color:#000;
font-size:20px;
margin-top:30px;
margin-left:72px;
font-family:微软雅黑;
}
</style>
<body>
<!--html部分-->
<p class="content_map">
<!-- 标题-->
<hr class="mLeft"/>
<span>相关宠物医院</span>
<hr class="mRight"/>
<!-- 左边部分：地图-->
<p id="maplist">
</p>
<!-- 右边部分点击左边要添加的内容：以及最开始加入的信息-->
<p id="map_right">
<p class="shopMsg">
<img src="images/w_map.png"/>
<p class="pmname">宠物店名：Petjoy宠物社区</p>
<p class="address">地址：长宁区机旋路1258号--1260号</p>
<p class="phone">电话号码：(021)53018000</p>
</p>
</p>
</p>
<!--js代码部分-->
<script type="text/javascript">
window.onload=function(){
getMap();
}
// 向地图添加信息：ajax
function getMap(){
//创建对象
var httpReq;
if(window.XMLHttpRequest){
httpReq=new XMLHttpRequest();
}else{
httpReq=new ActiveXObject("Microsoft.XMLHTTP");
}
var maplist=document.getElementById("maplist");//获取地图列表
maplist.innerHTML='';//清空地图里在html里面加的信息
// 定义回调函数，接收从数据库响应回来的数据。
// onreadystatechange()：存储函数（或函数名）。每当readyState属性改变时，就会调用该函数
httpReq.onreadystatechange=function(){
if(httpReq.readyState==4&&httpReq.status==200){
var jsonobj=JSON.parse(httpReq.responseText);
console.log(jsonobj.length);
for (var i = 0; i< jsonobj.length;i++) {
maplist.innerHTML+='<p class="mapShop">'+
'<img src="images/fi1.png" style="top:'+jsonobj[i].pmTop+"px"+';left:'+jsonobj[i].pmLeft+"px"+'"/>'+
'<p id="pmcity'+i+'" onclick="getMessage('+i+')" style="top:'+jsonobj[i].pmTop+"px"+';left:'+jsonobj[i].pmLeft+"px"+';position:absolute;padding-top:20px;'+'">' + jsonobj[i].pmCity + '</p>'+
'</p>';
}
}
}
//发起请求（打开一个地址）
httpReq.open("get", "adress.do", true);
//发送，如果提交方式为get，发送为null；如果提交方式为post，哪send里写要发送的参数，没得的话，就写null
httpReq.send(null);
}
//点击获取信息
function getMessage(a){
console.log("M----------1");
var httpReq;
if(window.XMLHttpRequest){
httpReq=new XMLHttpRequest();
}else{
httpReq=new ActiveXObject("Microsoft.XMLHTTP");
}
var map_right=document.getElementById("map_right");
map_right.innerHTML='';
httpReq.onreadystatechange=function(){
if(httpReq.readyState==4&&httpReq.status==200){
var jsonobj=JSON.parse(httpReq.responseText);
console.log(jsonobj.length);
for(var i=0;i<jsonobj.length;i++){
map_right.innerHTML+='<p class="shopMsg">'+
'<img src="images/'+jsonobj[i].pmImg+'"/>'+
'<p class="pmname">宠物店名：'+jsonobj[i].pmName+'</p>'+
'<p class="address">地址：'+jsonobj[i].pmAddress+'</p>'+
'<p class="phone">电话号码：'+jsonobj[i].pmPhone+'</p>'+
'</p>'
}
}
}
//发起请求
httpReq.open("get", "adressMsg.do?pmId="+a, true);
//发送
httpReq.send(null);
}
</script>
</body>
</html>Server-Teil: app.js (ein JavaScript):
var express=require("express");//引用express
var mysql=require("mysql");//引用mysql
var app=express();//执行express里的全局函数，返回一个express对象
app.configure(function(){
app.use(app.router);//路由，配置路由时，先执行，用户定义的拦截地址
app.use(express.static(dirname+"/public"));//设置静态资源路径
app.use(express.errorHandler());//开发者模块，将错误显示在html上
});
app.get("/adress.do",function(req,res){
//console.log("d-----------1");
//建立数据库连接，建立桥梁
var myconn=mysql.createConnection({
host:"localhost",
port:"3306",
user:"root",
password:"123456",
database:"pet"
});
//打开连接
myconn.connect();
var sql="SELECT * FROM petmap";
//console.log(sql);
myconn.query(sql,[],function(err,data){
//console.log(err);
//console.log(data);
res.send(data);
});
//关闭连接
myconn.end();
});
//城市点击响应
app.get("/adressMsg.do",function(req,res){
var pmId=req.query.pmId;
console.log(pmId);
//建立数据库连接，建立桥梁
var myconn=mysql.createConnection({
host:"localhost",
port:"3306",
user:"root",
password:"123456",
database:"pet"
});
//打开连接
myconn.connect();
console.log("f------------1");
var sql="SELECT * FROM petmap WHERE pmId=?";
console.log(sql);
var id=parseInt(pmId);
myconn.query(sql,[id+1],function(err,data){
console.log(err);
console.log(data);
res.send(data);
});
//关闭连接
myconn.end();
});
//监听端口号
app.listen(8888,function(){//监听
console.log("express监听成功！");
console.log(dirname);
});Datenbank-MySQL-Informationen:
/*创建数据库：pet*/
CREATE DATABASE pet;
/*宠物店地图*/
CREATE TABLE petmap(/*宠物店*/
pmId INT AUTO_INCREMENT PRIMARY KEY,/*宠物店id*/
pmName NVARCHAR(60),/*宠物店名*/
pmCity NVARCHAR(20),/*宠物店所在城市*/
pmAddress NVARCHAR(100),/*宠物店所在详细地址*/
pmImg VARCHAR(60),/*宠物店图片*/
pmPhone VARCHAR(30),/*宠物店电话号码*/
pmTop FLOAT,/*宠物店位置上面*/
pmLeft FLOAT/*宠物店位置下面*/
)
/*插入信息*/
INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft)
VALUES ('邛崃邛临美多宠物服务部','成都','成都市邛崃市长松路296号','map1.png','15202891690',360,320),
('谐和宠物医院','德阳','德阳市旌阳区珠江西路300号','map2.png','0838-6181255',320,350),
('天宁动物医院','西安','西安市新城区韩森路','map3.png','028-81836050',260,240),
('宠美康动物医院','乌鲁木齐','乌鲁木齐市天山区幸福路774号','map4.png','0991-2654158',210,170),
('绵阳康贝动物诊所','绵阳','绵阳市游仙区东津路5-2号','map5.png','0816-2987186',315,335),
('圣心动物医院','重庆','重庆市九龙坡区大公馆九龙大厦3-2','map6.png','023-68820999',360,380),
('吉祥宠物医院(油榨街店)','贵阳','贵阳市南明区油榨街花鸟市场宠物区','map7.png','0851-88275946',400,380),
('常德市武陵区动物医院','常德','常德市武陵区青年路478号','map8.png','0736-7236814',230,393),
('爱尔宠物','郑州','郑州市金水区金水东路3-6号','map9.png','0371-69193157',300,453),
('长沙市博旺宠物诊所','长沙','长沙市天心区西牌楼街41号附近','map10.png','0731-82329801',370,443),
('大嘴狗宠物医院','合肥','合肥市庐阳区北一环与肥西路交口向南','map11.png','0551-64286773',330,500),
('秦皇岛市宠物医院','秦皇岛','秦皇岛市海港区海阳路9号','map12.png','0335-3076769',165,540);
INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft)
VALUES ('乖乖宠宠物医院','天津','天津市河东区万东路77号(近8630医院)','map13.png','13820105131',195,510),
('北京宠物医院','北京','北京市西城区百万庄北里14号','map14.png','010-88377484',198,490),
('爱宠之家宠物医院','哈尔滨','哈尔滨市南岗区鼎新三道街37号','map15.png','0451-82516177',80,625);
INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft)
VALUES ('拉萨妙妙安心宠物诊所','西藏','拉萨市城关区纳金路城东工商1楼','map16.png','0891-6223291',360,170);Endergebnis:
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte achten Sie darauf zu anderen verwandten Themen im PHP Chinese-Website-Artikel!
Empfohlene Lektüre:
Ajax erhält API-Daten für die nationale Wettervorhersage
So implementieren Sie die Suchleiste mit AJax
Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Kartenschnittstelle mithilfe der Datenbank + Ajax-Methode. 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
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
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
1392
52
Wie implementiert die Go-Sprache die Hinzufügungs-, Lösch-, Änderungs- und Abfragevorgänge der Datenbank?
Mar 27, 2024 pm 09:39 PM
Die Go-Sprache ist eine effiziente, prägnante und leicht zu erlernende Programmiersprache. Sie wird von Entwicklern aufgrund ihrer Vorteile bei der gleichzeitigen Programmierung und Netzwerkprogrammierung bevorzugt. In der tatsächlichen Entwicklung sind Datenbankoperationen ein unverzichtbarer Bestandteil. In diesem Artikel wird erläutert, wie die Go-Sprache zum Implementieren von Datenbank-Hinzufügungs-, Lösch-, Änderungs- und Abfrageoperationen verwendet wird. In der Go-Sprache verwenden wir normalerweise Bibliotheken von Drittanbietern, um Datenbanken zu betreiben, z. B. häufig verwendete SQL-Pakete, Gorm usw. Hier nehmen wir das SQL-Paket als Beispiel, um vorzustellen, wie die Hinzufügungs-, Lösch-, Änderungs- und Abfragevorgänge der Datenbank implementiert werden. Angenommen, wir verwenden eine MySQL-Datenbank.
iOS 18 fügt eine neue Albumfunktion „Wiederhergestellt' hinzu, um verlorene oder beschädigte Fotos wiederherzustellen
Jul 18, 2024 am 05:48 AM
Apples neueste Versionen der iOS18-, iPadOS18- und macOS Sequoia-Systeme haben der Fotoanwendung eine wichtige Funktion hinzugefügt, die Benutzern dabei helfen soll, aus verschiedenen Gründen verlorene oder beschädigte Fotos und Videos einfach wiederherzustellen. Mit der neuen Funktion wird im Abschnitt „Extras“ der Fotos-App ein Album mit dem Namen „Wiederhergestellt“ eingeführt, das automatisch angezeigt wird, wenn ein Benutzer Bilder oder Videos auf seinem Gerät hat, die nicht Teil seiner Fotobibliothek sind. Das Aufkommen des Albums „Wiederhergestellt“ bietet eine Lösung für Fotos und Videos, die aufgrund einer Datenbankbeschädigung verloren gehen, die Kameraanwendung nicht korrekt in der Fotobibliothek speichert oder eine Drittanbieteranwendung die Fotobibliothek verwaltet. Benutzer benötigen nur wenige einfache Schritte
Wie implementiert Hibernate polymorphe Zuordnung?
Apr 17, 2024 pm 12:09 PM
Die polymorphe Hibernate-Zuordnung kann geerbte Klassen der Datenbank zuordnen und bietet die folgenden Zuordnungstypen: Joined-Subclass: Erstellen Sie eine separate Tabelle für die Unterklasse, einschließlich aller Spalten der übergeordneten Klasse. Tabelle pro Klasse: Erstellen Sie eine separate Tabelle für Unterklassen, die nur unterklassenspezifische Spalten enthält. Union-Unterklasse: ähnelt der verbundenen Unterklasse, aber die Tabelle der übergeordneten Klasse vereint alle Spalten der Unterklasse.
Ausführliches Tutorial zum Herstellen einer Datenbankverbindung mit MySQLi in PHP
Jun 04, 2024 pm 01:42 PM
So verwenden Sie MySQLi zum Herstellen einer Datenbankverbindung in PHP: MySQLi-Erweiterung einbinden (require_once) Verbindungsfunktion erstellen (functionconnect_to_db) Verbindungsfunktion aufrufen ($conn=connect_to_db()) Abfrage ausführen ($result=$conn->query()) Schließen Verbindung ( $conn->close())
Eine ausführliche Analyse, wie HTML die Datenbank liest
Apr 09, 2024 pm 12:36 PM
HTML kann die Datenbank nicht direkt lesen, dies kann jedoch über JavaScript und AJAX erreicht werden. Zu den Schritten gehören das Herstellen einer Datenbankverbindung, das Senden einer Abfrage, das Verarbeiten der Antwort und das Aktualisieren der Seite. Dieser Artikel bietet ein praktisches Beispiel für die Verwendung von JavaScript, AJAX und PHP zum Lesen von Daten aus einer MySQL-Datenbank und zeigt, wie Abfrageergebnisse dynamisch auf einer HTML-Seite angezeigt werden. In diesem Beispiel wird XMLHttpRequest verwendet, um eine Datenbankverbindung herzustellen, eine Abfrage zu senden und die Antwort zu verarbeiten. Dadurch werden Daten in Seitenelemente gefüllt und die Funktion des HTML-Lesens der Datenbank realisiert.
Umgang mit Datenbankverbindungsfehlern in PHP
Jun 05, 2024 pm 02:16 PM
Um Datenbankverbindungsfehler in PHP zu behandeln, können Sie die folgenden Schritte ausführen: Verwenden Sie mysqli_connect_errno(), um den Fehlercode abzurufen. Verwenden Sie mysqli_connect_error(), um die Fehlermeldung abzurufen. Durch die Erfassung und Protokollierung dieser Fehlermeldungen können Datenbankverbindungsprobleme leicht identifiziert und behoben werden, wodurch der reibungslose Betrieb Ihrer Anwendung gewährleistet wird.
Tipps und Praktiken zum Umgang mit verstümmelten chinesischen Zeichen in Datenbanken mit PHP
Mar 27, 2024 pm 05:21 PM
PHP ist eine Back-End-Programmiersprache, die in der Website-Entwicklung weit verbreitet ist. Sie verfügt über leistungsstarke Datenbankbetriebsfunktionen und wird häufig zur Interaktion mit Datenbanken wie MySQL verwendet. Aufgrund der Komplexität der Kodierung chinesischer Zeichen treten jedoch häufig Probleme beim Umgang mit verstümmelten chinesischen Zeichen in der Datenbank auf. In diesem Artikel werden die Fähigkeiten und Praktiken von PHP beim Umgang mit chinesischen verstümmelten Zeichen in Datenbanken vorgestellt, einschließlich häufiger Ursachen für verstümmelte Zeichen, Lösungen und spezifischer Codebeispiele. Häufige Gründe für verstümmelte Zeichen sind falsche Einstellungen für den Datenbank-Zeichensatz: Beim Erstellen der Datenbank muss der richtige Zeichensatz ausgewählt werden, z. B. utf8 oder u
Wie verbinde ich mich mit Golang mit einer Remote-Datenbank?
Jun 01, 2024 pm 08:31 PM
Über das Datenbank-/SQL-Paket der Go-Standardbibliothek können Sie eine Verbindung zu Remote-Datenbanken wie MySQL, PostgreSQL oder SQLite herstellen: Erstellen Sie eine Verbindungszeichenfolge mit Datenbankverbindungsinformationen. Verwenden Sie die Funktion sql.Open(), um eine Datenbankverbindung zu öffnen. Führen Sie Datenbankoperationen wie SQL-Abfragen und Einfügeoperationen durch. Verwenden Sie „defer“, um die Datenbankverbindung zu schließen und Ressourcen freizugeben.
