Using Database and Ajax methods to write map instance code _ajax related

Ajax Tutorials

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

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

AJAX is the art of exchanging data with the server and updating parts of the Web page without reloading the entire page.

Client section: HTML, JS, CSS code section:

<!
DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > 
var express=require ("Express")//Quoted Express var mysql=require ("MySQL");//quote MySQL var app=express ()//execute global function in Express , returns a Express object App.configure (function () {app.use (app.router);//routing, configuring routing, executing first, user-defined intercept address App.use express.static (__
Dirname+ "/public");/set the static resource path App.use (Express.errorhandler ());//Developer module, display error on HTML}); App.get ("/adress.do", function (req,res) {//console.log ("D-----------1");//Establish database connection, build 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 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 ();
}); Listener Port number App.listen (8888,function () {//Monitor Console.log ("Express monitor success!")
");
Console.log (__dirname); });

Database MySQL information:

/* Create databases: pet*/CREATE DATABASE pet; /* Pet Shop Map/CREATE TABLE petmap (/* Pet shop/pmId INT auto_increment PRIMARY key,/* Pet Shop id*/pmname NVARCHAR (60),/* Pet Shop Name * * * pmcity NV Archar (20),/* Pet Shop in the city/pmaddress NVARCHAR (100),/* Pet Shop in the detailed address * * pmimg VARCHAR (60),/* Pet shop Pictures/Pmphone VARCHAR (30),/* Pet Shop Phone number */Pmtop float,/* Pet Shop above the position * * * Pmleft float/* Pet Shop below the location * * * INSERT information * * inserts into Petmap (PMNAME,PMCITY,PMADDRESS,PMIMG, Pmphone,pmtop,pmleft) VALUES (' Qionglai qiong Pet Service Department ', ' Chengdu ', ' Chengdu Qionglai Chang Song Road, No. No. 296 ', ' map1.png ', ' 15202891690 ', 360,320), (' Harmony Pet Hospital ', ' Deyang ', ' Deyang Jinyang District, no. No. 300 Zhujiang West Road, ' Map2.png ', ' 0838-6181255 ', 320,350 ', (' Tinian Animal Hospital ', ' Xian ', ' XI ' an Xincheng District Hansen Road ', ' map3.png ', ' 028-81836050 ', 260,240), (' Pet Mei Kang Animal Hospital ', ' Urumqi ', ' Urumqi Tianshan District Happy Road No. 774 ', ' map4.png ', ' 0991-2654158 ', 210,170), (' Mianyang Kang-pui Animal Clinic ', ' Mianyang ', ' No. 5-2 East Jin Road, Mianyang Youxian District ', ' map5.png ', ' 0816-2987186 ', 315,335 ', (' Sacred Heart Animal Hospital ', ' Chongqing ', ' Jiulongpo District mansion, Chongqing, Kowloon Building 3-2 ', ' map6.png ', ' 023-68820999 ' , 360,380), (' Lucky Pet Hospital (Oil Press Street store) ', ' Guiyang ', ' Guiyang Nanming District Oil Press Street Flower Market pet area ', ' map7.png ', ' 0851-88275946 ', 400,380), (' Changde Wuling District Animal Hospital ', ' Changde ', ' Changde Wuling District Youth Road, No. No. 478 ', ' map8.png ', ' 0736-7236814 ', 230,393), (' Pet ', ' Zhengzhou ', ' Zhengzhou Jinshui GoldNo. 3-6 Water East Road ', ' map9.png ', ' 0371-69193157 ', 300,453, (' Changsha Bowang Pet Clinic ', ' Changsha ', ' Changsha Tianxin District West Pai Street, near 41st ', ' map10.png ', ' 0731-82329801 ', 370,443), (' Big Mouth dog Pet Hospital ', ' Hefei ', ' Hefei Luyang District North One Ring and Feixi road junction to South ', ' map11.png ', ' 0551-64286773 ', 330,500), (' Qinhuangdao Shi Pet Hospital ', ' Qinhuangdao ', '
Qinhuangdao Shi Haigang District Haiyang Road, No. 9th ', ' map12.png ', ' 0335-3076769 ', 165,540); INSERT into Petmap (pmname,pmcity,pmaddress,pmimg,pmphone,pmtop,pmleft) VALUES (' Pet Hospital ', ' Tianjin ', ' No. 77th Wan East Road, Hedong District, Tianjin, China ( Nearly 8630 hospitals) ', ' map13.png ', ' 13820105131 ', 195,510 ', (' Beijing Pet Hospital ', ' Beijing ', ' the ' million Zhuang north of Beijing Xicheng District, 14th ', ' map14.png ', ' 010-88377484 ',
198,490), (' Pet Hospital ', ' Harbin ', ' Nangang District, Harbin City, no. 37th, three Road Street, ' Map15.png ', ' 0451-82516177 ', 80,625); INSERT into Petmap (pmname,pmcity,pmaddress,pmimg,pmphone,pmtop,pmleft) VALUES (' Lhasa Wonderful Comfort Pet Clinic ', ' Tibet ', ' Lasa Chengguan District na Jin Road East Industrial 1 floor ' , ' map16.png ', ' 0891-6223291 ', 360,170);

Final Result:

The above is a small series to introduce you through the database and Ajax methods to write the map of the example code, I hope to help you, if you have any questions welcome to my message, small series will promptly reply to everyone, here also thank you for your support cloud Habitat community site!