Example Code of Writing Map Using Database and Ajax Method

ajax tutorial

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

AJAX is not a new programming language, but a new method using existing standards.

AJAX is the art of exchanging data with a server and updating part of a web page, without reloading the entire page.

Client part: html, js, css code part:

<!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 section-->
<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>
<!--html section-->
<div class="content_map">
<!-- Title-->
<hr class="mLeft"/>
<span>Related pet hospitals</span>
<hr class="mRight"/>
<!-- Left part: Map-->
<div id="maplist">
</div>
<!-- Click on the content to be added on the left side from the right part: as well as the information added at the beginning-->
<div id="map_right">
<div class="shopMsg">
<img src="images/w_map.png"/>
<div class="pmname">Pet shop name: Petjoy Pet Community</div>
<div class="address">Address: Changning District, Jixuan Road1258number--1260 number</div>
<div class="phone">Phone number: (021)53018000</div>
</div>
</div>
</div>
<!--js code section-->
<script type="text/javascript">
window.onload=function(){
getMap();
}
// Add information to the map: ajax
function getMap(){
//Create an object
var httpReq;
if(window.XMLHttpRequest){
httpReq=new XMLHttpRequest();
}
httpReq=new ActiveXObject("Microsoft.XMLHTTP");
}
var maplist=document.getElementById("maplist");//Get the map list
maplist.innerHTML='';//Clear the information added to the map in the html
// Define a callback function to receive data returned from the database.
// onreadystatechange(): Store function (or function name). This function is called whenever the readyState attribute changes
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>';
}
}
}
//Initiate request (open an address)
httpReq.open("get", "adress.do", true);
//Send, if the submission method is get, send is null; if the submission method is post, write the parameters to be sent in the send, or write null if there are none
httpReq.send(null);
}
//Click to get information
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+"/'+
'Pet Shop Name: '+jsonobj[i].pmName+</div>'+
<div class="address">Address: '</div>+jsonobj[i].pmAddress+</div>'+
<div class="phone">Phone number: '</div>+jsonobj[i].pmPhone+</div>'+
</div>'
}
}
}
//Initiate request
httpReq.open("get", "adressMsg.do?pmId="+a, true);
//Send
httpReq.send(null);
}
</script>
</body>
</html>

Server-side part: app.js (a JavaScript file):

var express=require("express");//Reference express
var mysql=require("mysql");//Reference mysql
var app=express();//Execute global functions in express, return an express object
app.configure(function(){
app.use(app.router);//Routing, execute first when configuring routes, user-defined intercepting address
app.use(express.static(__dirname+"/public"));//Set static resource path
app.use(express.errorHandler());//Developer module, display errors on html
});
app.get("/adress.do",function(req,res){
//console.log("d-----------1");
//Establish database connection, build a bridge
var myconn=mysql.createConnection({
host: "localhost",
port: "3306,
user: "root",
password: "123456,
database: "pet"
});
//Open connection
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();
});
//City click response
app.get("/adressMsg.do",function(req,res){
var pmId=req.query.pmId;
console.log(pmId);
//Establish database connection, build a bridge
var myconn=mysql.createConnection({
host: "localhost",
port: "3306,
user: "root",
password: "123456,
database: "pet"
});
//Open connection
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 listening successfully!');
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')296floor1.png','','map15202891690',360,320),
('Xiehe Pet Hospital', 'Deyang', 'Zhijiang West Road in Jingyang District, Deyang City')300号2.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')774floor4.png','0991-2654158',210,170),
('Mianyang Kangbei Animal Clinic', 'Mianyang', 'Dongjin Road in Youxian District, Mianyang City')5-2floor5.png','0816-2987186',315,335),
('Shengxin Animal Hospital', 'Chongqing', 'Dagongguan Jiulong Building in Jiulongpo District, Chongqing City')3-26.png','023-68820999',360,380),
('Jixiang Pet Hospital (Youzha Street Store)', 'Guiyang', 'Pet Area of花鸟Market in Nanning District, Guiyang City', 'map')7.png','0851-88275946',400,380),
('Changde Wuling District Animal Hospital', 'Changde', 'Youth Road in Wuling District, Changde City')478floor8.png','0736-7236814',230,393),
('Aier Pet', 'Zhengzhou', 'Jinshui East Road in Jinshui District, Zhengzhou City')3-6floor9.png','0371-69193157',300,453),
('Changsha Bowaang Pet Clinic', 'Changsha', 'Xibailou Street in Tianxin District, Changsha City')41nearby10.png','0731-82329801',370,443),
('Big Mouth Dog Pet Hospital', 'Hefei', 'Intersection of Beiyi Ring Road and Feixi Road in Luyang District, Hefei City', 'map')11.png','0551-64286773',330,500),
('Qinhuangdao City Pet Hospital','Qinhuangdao','Qinhuangdao City Haikou District Haiyang Road9floor12.png','0335-3076769',165,540);
INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft) 
('Guai Guai Pet Hospital','Tianjin','Tianjin City Hedong District Wan East Road77near863hospital)','map13.png','','map13820105131',195,510),
('Beijing Pet Hospital','Beijing','Beijing City Xicheng District Baiwan Zhuang North Lane14floor14.png','010-88377484',198,490),
('Aipet Pet Hospital','Harbin','Harbin City Nangang District Dingxin Sandao Street37floor15.png','0451-82516177',80,625);
INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft) 
VALUES ('Lhasa Miao Miao Anxin Pet Clinic','Tibet','Lhasa City Chengguan District Naching Road Chengdong Industrial1floor16.png','0891-6223291',360,170);

Final Result:

The following is the example code of writing a map through database and AJAX methods introduced by the editor for everyone, I hope it will be helpful to everyone. If you have any questions, please leave a message, the editor will reply to everyone in time, and I also want to thank everyone for their support of the Yell Tutorial website!

Declaration: The content of this article is from the Internet, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the copyright, has not been manually edited, and does not bear relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report any violations by email to codebox.com (replace # with @) and provide relevant evidence. Once verified, this site will immediately delete the infringing content.

Basic Tutorial