interface Web
js tutoriel
Comment implémenter l'interface cartographique à l'aide de la méthode base de données + ajax
Comment implémenter l'interface cartographique à l'aide de la méthode base de données + ajax
Cette fois je vais vous montrer comment implémenter l'interface cartographique avec la méthode base de données + ajax Quelles sont les précautions pour implémenter l'interface cartographique avec la méthode base de données + ajax ?
Tutoriel ajax
AJAX = JavaScript et XML asynchrones (JavaScript et XML asynchrones).
AJAX n'est pas un nouveau langage de programmation, mais une nouvelle façon d'utiliser les standards existants.
AJAX est l'art d'échanger des données avec un serveur et de mettre à jour des parties d'une page Web sans recharger la page entière.
Partie client : partie code html, js, css :
<!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>Partie serveur : app.js (un 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);
});Base de données mysql Informations :
/*创建数据库：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);Résultat final :
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention. vers d'autres sujets connexes sur l'article du site Web PHP chinois !
Lecture recommandée :
Ajax obtient des données API pour les prévisions météorologiques nationales
Comment implémenter la barre de recherche avec AJax
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment le langage Go implémente-t-il les opérations d'ajout, de suppression, de modification et de requête de la base de données ?
Mar 27, 2024 pm 09:39 PM
Le langage Go est un langage de programmation efficace, concis et facile à apprendre. Il est privilégié par les développeurs en raison de ses avantages en programmation simultanée et en programmation réseau. Dans le développement réel, les opérations de base de données font partie intégrante. Cet article explique comment utiliser le langage Go pour implémenter les opérations d'ajout, de suppression, de modification et de requête de base de données. Dans le langage Go, nous utilisons généralement des bibliothèques tierces pour faire fonctionner les bases de données, telles que les packages SQL couramment utilisés, gorm, etc. Ici, nous prenons le package SQL comme exemple pour présenter comment implémenter les opérations d'ajout, de suppression, de modification et de requête de la base de données. Supposons que nous utilisons une base de données MySQL.
iOS 18 ajoute une nouvelle fonction d'album 'Récupéré' pour récupérer les photos perdues ou endommagées
Jul 18, 2024 am 05:48 AM
Les dernières versions d'Apple des systèmes iOS18, iPadOS18 et macOS Sequoia ont ajouté une fonctionnalité importante à l'application Photos, conçue pour aider les utilisateurs à récupérer facilement des photos et des vidéos perdues ou endommagées pour diverses raisons. La nouvelle fonctionnalité introduit un album appelé "Récupéré" dans la section Outils de l'application Photos qui apparaîtra automatiquement lorsqu'un utilisateur a des photos ou des vidéos sur son appareil qui ne font pas partie de sa photothèque. L'émergence de l'album « Récupéré » offre une solution aux photos et vidéos perdues en raison d'une corruption de la base de données, d'une application d'appareil photo qui n'enregistre pas correctement dans la photothèque ou d'une application tierce gérant la photothèque. Les utilisateurs n'ont besoin que de quelques étapes simples
Comment Hibernate implémente-t-il le mappage polymorphe ?
Apr 17, 2024 pm 12:09 PM
Le mappage polymorphe Hibernate peut mapper les classes héritées à la base de données et fournit les types de mappage suivants : join-subclass : crée une table séparée pour la sous-classe, incluant toutes les colonnes de la classe parent. table par classe : créez une table distincte pour les sous-classes, contenant uniquement des colonnes spécifiques aux sous-classes. union-subclass : similaire à join-subclass, mais la table de classe parent réunit toutes les colonnes de la sous-classe.
Tutoriel détaillé sur l'établissement d'une connexion à une base de données à l'aide de MySQLi en PHP
Jun 04, 2024 pm 01:42 PM
Comment utiliser MySQLi pour établir une connexion à une base de données en PHP : Inclure l'extension MySQLi (require_once) Créer une fonction de connexion (functionconnect_to_db) Appeler la fonction de connexion ($conn=connect_to_db()) Exécuter une requête ($result=$conn->query()) Fermer connexion ( $conn->close())
Une analyse approfondie de la façon dont HTML lit la base de données
Apr 09, 2024 pm 12:36 PM
HTML ne peut pas lire directement la base de données, mais cela peut être réalisé via JavaScript et AJAX. Les étapes comprennent l'établissement d'une connexion à la base de données, l'envoi d'une requête, le traitement de la réponse et la mise à jour de la page. Cet article fournit un exemple pratique d'utilisation de JavaScript, AJAX et PHP pour lire les données d'une base de données MySQL, montrant comment afficher dynamiquement les résultats d'une requête dans une page HTML. Cet exemple utilise XMLHttpRequest pour établir une connexion à la base de données, envoyer une requête et traiter la réponse, remplissant ainsi les données dans les éléments de la page et réalisant la fonction de lecture HTML de la base de données.
Comment gérer les erreurs de connexion à la base de données en PHP
Jun 05, 2024 pm 02:16 PM
Pour gérer les erreurs de connexion à la base de données en PHP, vous pouvez utiliser les étapes suivantes : Utilisez mysqli_connect_errno() pour obtenir le code d'erreur. Utilisez mysqli_connect_error() pour obtenir le message d'erreur. En capturant et en enregistrant ces messages d'erreur, les problèmes de connexion à la base de données peuvent être facilement identifiés et résolus, garantissant ainsi le bon fonctionnement de votre application.
Conseils et pratiques pour gérer les caractères chinois tronqués dans les bases de données avec PHP
Mar 27, 2024 pm 05:21 PM
PHP est un langage de programmation back-end largement utilisé dans le développement de sites Web. Il possède de puissantes fonctions d'exploitation de bases de données et est souvent utilisé pour interagir avec des bases de données telles que MySQL. Cependant, en raison de la complexité du codage des caractères chinois, des problèmes surviennent souvent lorsqu'il s'agit de caractères chinois tronqués dans la base de données. Cet article présentera les compétences et les pratiques de PHP dans la gestion des caractères chinois tronqués dans les bases de données, y compris les causes courantes des caractères tronqués, les solutions et des exemples de code spécifiques. Les raisons courantes pour lesquelles les caractères sont tronqués sont des paramètres de jeu de caractères incorrects dans la base de données : le jeu de caractères correct doit être sélectionné lors de la création de la base de données, comme utf8 ou u.
Comment utiliser les fonctions de rappel de base de données dans Golang ?
Jun 03, 2024 pm 02:20 PM
L'utilisation de la fonction de rappel de base de données dans Golang peut permettre : d'exécuter du code personnalisé une fois l'opération de base de données spécifiée terminée. Ajoutez un comportement personnalisé via des fonctions distinctes sans écrire de code supplémentaire. Des fonctions de rappel sont disponibles pour les opérations d'insertion, de mise à jour, de suppression et de requête. Vous devez utiliser la fonction sql.Exec, sql.QueryRow ou sql.Query pour utiliser la fonction de rappel.
