Exemple de code de carte écrit par la méthode de base de données et AJAX

ajax教程

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

客户端部分：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: Microsoft YaHei;
}
.shopMsg .address{
color:#000;
font-size:20px;
margin-top:30px;
margin-left:72px;
font-family: Microsoft YaHei;
}
.shopMsg .phone{
color:#000;
font-size:20px;
margin-top:30px;
margin-left:72px;
font-family: Microsoft YaHei;
}
</style>
<body>
<!--partie html-->
<div class="content_map">
<!-- Titre-->
<hr class="mLeft"/>
<span>Hôpitaux vétérinaires pertinents</span>
<hr class="mRight"/>
<!-- Partie gauche : carte-->
<div id="maplist">
</div>
<!-- Cliquez sur la partie droite pour ajouter le contenu de la gauche : ainsi que les informations ajoutées au début-->
<div id="map_right">
<div class="shopMsg">
<img src="images/w_map.png"/>
<div class="pmname">Nom du magasin de pets : Petjoy Pet Community</div>
<div class="address">Adresse : Jixuan Road, Changning District1258)--1260/div>
<div class="phone">Numéro de téléphone : (021)53018000</div>
</div>
</div>
</div>
<!--partie de code js-->
<script type="text/javascript">
window.onload=function(){
getMap();
}
// Ajouter des informations à la carte : ajax
function getMap(){
//Créer un objet
var httpReq;
if(window.XMLHttpRequest){
httpReq=new XMLHttpRequest();
}
httpReq=new ActiveXObject("Microsoft.XMLHTTP");
}
var maplist=document.getElementById("maplist");//Obtenir la liste des cartes
maplist.innerHTML='';//Vider les informations ajoutées dans la carte dans l'html
// Définir la fonction de rappel, recevant les données en réponse de la base de données.
// onreadystatechange() : fonction de stockage (ou nom de la fonction). La fonction est appelée à chaque changement de l'attribut 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+'<div class="mapShop">'+
'<img src="images/fi1.png" style="top:'+jsonobj[i].pmTop+"px"+';left:'+jsonobj[i].pmLeft+"px"+'"/'>+
'<div 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 + </div>'+
</div>';
}
}
}
//Lancer la requête (ouvrir une adresse)
httpReq.open("get", "adress.do", true);
//Envoyer, si le mode de soumission est GET, l'envoi est null; si le mode de soumission est POST, écrivez les paramètres à envoyer dans send, s'il n'y en a pas, écrivez null
httpReq.send(null);
}
//Cliquez pour obtenir des informations
function getMessage(a){
console.log("M----------1");
var httpReq;
if(window.XMLHttpRequest){
httpReq=new XMLHttpRequest();
}
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+'<div class="shopMsg">'+
'<img src="images/'+jsonobj[i].pmImg+'"/'>+
'<div class="pmname">Nom de l'animal de compagnie :'+jsonobj[i].pmName+</div>'+
<div class="address">Adresse : '</div>+jsonobj[i].pmAddress+</div>'+
<div class="phone">Numéro de téléphone : '</div>+jsonobj[i].pmPhone+</div>'+
</div>'
}
}
}
//Lancer une requête
httpReq.open("get", "adressMsg.do?pmId="+a, true);
//Envoyer
httpReq.send(null);
}
</script>
</body>
</html>

Partie serveur : app.js (un fichier JavaScript):

var express=require("express");//Référence express
var mysql=require("mysql");//Référence mysql
var app=express();//Exécutez la fonction globale de express, retournez un objet express
app.configure(function(){
app.use(app.router);//Route, exécutez d'abord lors de la configuration du routeur, l'adresse d'interception définie par l'utilisateur
app.use(express.static(__dirname+"/public"));//Définir le chemin des ressources statiques
app.use(express.errorHandler());//Module développeur, affichez les erreurs sur l'html
);
app.get("/adress.do",function(req,res){
//console.log("d-----------1");
//Établir la connexion à la base de données, établit un pont
var myconn=mysql.createConnection({
host:\"localhost\",
port:\"3306,
user:\"root\",
password:\"123456,
database:"pet"
);
//Ouvrir la connexion
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);
);
//Close connection
myconn.end();
);
//Réponse au clic sur la ville
app.get("/adressMsg.do",function(req,res){
var pmId=req.query.pmId;
console.log(pmId);
//Établir la connexion à la base de données, établit un pont
var myconn=mysql.createConnection({
host:\"localhost\",
port:\"3306,
user:\"root\",
password:\"123456,
database:"pet"
);
//Ouvrir la connexion
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);
);
//Close connection
myconn.end();
);
//Listening port
app.listen(8888,function(){}//Listen
console.log("express listen successful!");
console.log(__dirname);
);

Database mysql information:

/*Create database: pet*/
CREATE DATABASE pet;
/*Pet store map*/
CREATE TABLE petmap(/*Pet store*/
pmId INT AUTO_INCREMENT PRIMARY KEY,/*Pet store id*/
pmName NVARCHAR(60),/*Pet store name*/
pmCity NVARCHAR(20),/*City where the pet store is located*/
pmAddress NVARCHAR(100),/*Detailed address of the pet store*/
pmImg VARCHAR(60),/*Pet store picture*/
pmPhone VARCHAR(30),/*Pet store phone number*/
pmTop FLOAT,/*Above the pet store location*/
pmLeft FLOAT/*Below the pet store location*/
)
/*Insert information*/
INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft) 
VALUES ('Qionglai Qionglai Meiduo Pet Service Department', 'Chengdu', 'Chang'an Road in Qionglai City, Chengdu City')296Numéro115202891690'360,320),
('Harmony Pet Hospital', 'Deyang', 'Xijiang Road in Jingyang District, Deyang City')300 number2.png','0838-6181255',320,350),
('Tianning Animal Hospital', 'Xi'an', 'HanSEN Road in Xincheng District, Xi'an City', 'map')3.png','028-81836050'260,240),
('Pet Beauty Kang Animal Hospital', 'Urumqi', 'Xinfu Road in Tianshan District, Urumqi City')774Numéro4.png','0991-2654158',210,170),
('Animal Clinic Kangbei, Mianyang', 'Mianyang', 'Dongjin Road in Youxian District, Mianyang City')5-2Numéro5.png','0816-2987186',315,335)
('Animal Hospital Shengxin', 'Chongqing', 'Daogongguan Jiulong Building, Jiulongpo District, Chongqing City')3-26.png','023-68820999',360,380),
('Pet Hospital Jixiang (Youzhai Street Store)', 'Guiyang', 'Flora and Fauna Market in Youzhai Street, Nancheng District, Guiyang City', 'map')7.png','0851-88275946',400,380),
('Animal Hospital Wuling District, Changde', 'Changde', 'Youth Road in Wuling District, Changde City')478Numéro8.png','0736-7236814',230,393)
('Pet Eye, Zhengzhou', 'Zhengzhou', 'Jinshui East Road in Jinshui District, Zhengzhou City')3-6Numéro9.png','0371-69193157',300,453)
('Pet Clinic Bo Wang, Changsha', 'Changsha', 'Xibailou Street in Tianxin District, Changsha City')41nearby10.png','0731-82329801',370,443)
('Pet Hospital Big Mouth Dog', 'Hefei', 'Interchange of North First Ring and Feixi Road in Luoyang District, Hefei City', 'map')11.png','0551-64286773',330,500),
('Hôpital vétérinaire pour animaux de compagnie Qinhuangdao','Qinhuangdao','Haiyang Road, Haikou District, Qinhuangdao',9Numéro12.png','0335-3076769',165,540);
INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft) 
VALUES ('Clinique vétérinaire Guaigui pour animaux de compagnie Tianjin','Tianjin','Dongli Road, Hedong District, Tianjin',77près de863Hôpital)”，“map1313820105131',195,510)
('Hôpital vétérinaire pour animaux de compagnie Pékin','Pékin','Beizhaili, Xicheng District, Pékin',14Numéro14.png','010-88377484',198,490),
('Clinique vétérinaire Aichongzai pour animaux de compagnie Harbin','Harbin','Dedao 3 Jie, Nangang District, Harbin',37Numéro15.png','0451-82516177',80,625);
INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft) 
VALUES ('Clinique vétérinaire Miaomiao Anxin pour animaux de compagnie Lhasa','Xinjiang','Rue Chengguan, Dajin Road, District de Chengguan, Lhassa',1Étage16.png','0891-6223291',360,170);

Résultat final :

Les codes d'exemple de cartes mentionnés ci-dessus sont fournis par l'éditeur pour illustrer comment écrire une carte en utilisant des bases de données et AJAX. J'espère que cela vous sera utile. Si vous avez des questions, n'hésitez pas à me laisser un message, je vous répondrai à temps. Merci également de votre soutien au site Web de tutoriel d'alarme !

Déclaration : Le contenu de cet article est diffusé sur Internet, et appartient à l'auteur original. Le contenu est apporté par les utilisateurs d'Internet de manière volontaire et téléversé. Ce site n'appartient pas au propriétaire, n'a pas été traité par l'éditeur humain et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour faire une plainte, et fournir des preuves pertinentes. Une fois confirmé, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)

Tutoriel de base