Esempio di codice per la mappa utilizzando il database e il metodo AJAX

Tutorial AJAX

AJAX = Asynchronous JavaScript and XML (JavaScript asincrono e XML).

AJAX non è una nuova lingua di programmazione, ma un nuovo metodo che utilizza standard esistenti.

AJAX è l'arte di scambiare dati con il server e aggiornare parti di una pagina web senza ricaricare l'intera pagina.

Parte client: codice 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>
<!-- Parte HTML-->
<div class="content_map">
<!-- Titolo-->
<hr class="mLeft"/>
<span>Pet Hospitals Related</span>
<hr class="mRight"/>
<!-- Parte sinistra: mappa-->
<div id="maplist">
</div>
<!-- Parte destra cliccata per aggiungere il contenuto di sinistra: e le informazioni aggiunte all'inizio-->
<div id="map_right">
<div class="shopMsg">
<img src="images/w_map.png"/>
<div class="pmname">Nome del negozio di animali domestici: Petjoy Pet Community</div>
<div class="address">Indirizzo: 1258-1260 Jixuan Road, Changning District</div>
<div class="phone">Numero di telefono: (021)53018000</div>
</div>
</div>
</div>
<!-- Parte del codice JavaScript -->
<script type="text/javascript">
window.onload=function(){
getMap();
}
//Aggiungere informazioni alla mappa: ajax
function getMap(){
//Creare l'oggetto
var httpReq;
if(window.XMLHttpRequest){
httpReq=new XMLHttpRequest();
}
httpReq=new ActiveXObject("Microsoft.XMLHTTP");
}
var maplist=document.getElementById("maplist");//Ottener la lista della mappa
maplist.innerHTML='';//Svuotare le informazioni aggiunte in html nella mappa
// Definire la funzione di callback, che riceve i dati di risposta dal database.
// 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+='<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>';
}
}
}
//发起请求（打开一个地址）
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();
}
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">宠物店名：'+jsonobj[i].pmName+'</div>
<div class="address">地址：'+jsonobj[i].pmAddress+'</div>
<div class="phone">电话号码：'+jsonobj[i].pmPhone+'</div>
</div>
}
}
}
//发起请求
httpReq.open("get", "adressMsg.do?pmId="+a, true);
//发送
httpReq.send(null);
}
</script>
</body>
</html>

服务端部分：app.js(一个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);
});

数据库mysql信息：


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/*Below the pet store location*/
)
/*Insert information*/
INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft) 
VALUES ('Qionglai Qionglinmeiduo Pet Service Department', 'Chengdu', 'No. 296 Changsong Road, Qionglai City, Chengdu City', 'map1.png', '15202891690', 360, 320),
('Xiehe Pet Hospital', 'Deyang', 'No. 300 Xijiang Road, Jingyang District, Deyang City', 'map2.png', '0838-6181255', 320, 350),
('Tianning Animal Hospital', 'Xi'an', 'HanSen Road, Xincheng District, Xi'an City', 'map3.png', '028-81836050', 260, 240),
('Pet Beauty Kang Animal Hospital', 'Urumqi', 'No. 77 Xingfu Road, Tianhe District, Urumqi City', 'map4.png', '0991-2654158', 210, 170),
('Mianyang Kangbei Animal Clinic', 'Mianyang', 'No. 5-2 Dongjin Road, Youxian District, Mianyang City', 'map5.png', '0816-2987186', 315, 335),
('Shengxin Animal Hospital', 'Chongqing', 'No. 3-2 Jiugong Building, Jiulongpo District, Chongqing City', 'map6.png', '023-68820999', 360, 380),
('Jixiang Pet Hospital (Youzha Street Store)', 'Guiyang', 'Pet Area of the Flower and Bird Market in Nanning District, Guiyang City', 'map7.png', '0851-88275946', 400, 380),
('Changde Wuling District Animal Hospital', 'Changde', 'No. 478 Qingnian Road, Wuling District, Changde City', 'map8.png', '0736-7236814', 230, 393),
('Aier Pet', 'Zhengzhou', 'No. 3-6 Jinshui East Road, Jinshui District, Zhengzhou City', 'map9.png', '0371-69193157', 300, 453),
('Changsha Bowang Pet Clinic', 'Changsha', 'Near No. 41 Xibailou Street, Tianxin District, Changsha City', 'map10.png', '0731-82329801', 370, 443),
('Big Mouth Dog Pet Hospital', 'Hefei', 'Intersection of Beiyi Ring Road and Feixi Road, Luyang District, Hefei City (southward)', 'map11.png', '0551-64286773', 330, 500),
('Qinhuangdao Pet Hospital', 'Qinhuangdao', 'No. 9 Haiyang Road, Haikou District, Qinhuangdao City', 'map12.png', '0335-3076769', 165, 540);
INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft) 
VALUES ('Pet Hospital Gai Gai', 'Tianjin', 'No. 77 Wan East Road, Hedong District, Tianjin City (near Hospital No. 8630)', 'map13.png', '13820105131', 195, 510),
('Beijing Pet Hospital', 'Beijing', 'No. 14 Beiziliangli, Xicheng District, Beijing City', 'map14.png', '010-88377484', 198, 490),
('Pet Home Hospital', 'Harbin', 'No. 37 Dingxin Sandao Street, Nangang District, Harbin City', 'map15.png', '0451-82516177', 80, 625);
INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft) 
VALUES ('Pet Clinic MaoMao Anxin Lhasa', 'Tibet', 'Najin Road, Chengguan District, Lhasa City', 'map16.png', '0891-6223291', 360, 170);

Risultato finale:

Risultato finale: Esempio di codice per creare una mappa utilizzando database e AJAX, spero sia utile a tutti. Se avete domande, lasciate un commento e sarò felice di rispondere. In questo senso, anche grazie per il supporto al sito web Yellowscream tutorial!

Dichiarazione: Il contenuto di questo articolo è stato tratto da Internet, i diritti d'autore appartengono agli autori, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non possiede i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente i contenuti sospetti di violazione del copyright.

Corso di base

Elasticsearch Corso