這篇文章主要為大家展示了“如何通過數(shù)據(jù)庫和ajax方法寫出地圖”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何通過數(shù)據(jù)庫和ajax方法寫出地圖”這篇文章吧。
通河ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景,ssl證書未來市場廣闊!成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道,可以享受市場價(jià)格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:18982081108(備注:SSL證書合作)期待與您的合作!
ajax教程
AJAX = Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。
AJAX 不是新的編程語言,而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。
AJAX 是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術(shù),在不重新加載整個(gè)頁面的情況下。
客戶端部分:html、js、css代碼部分:
相關(guān)寵物醫(yī)院
寵物店名:Petjoy寵物社區(qū)地址:長寧區(qū)機(jī)旋路1258號(hào)--1260號(hào)電話號(hào)碼:(021)53018000
服務(wù)端部分:app.js(一個(gè)JavaScript):
var express=require("express");//引用express var MySQL=require("mysql");//引用mysql var app=express();//執(zhí)行express里的全局函數(shù),返回一個(gè)express對象 app.configure(function(){ app.use(app.router);//路由,配置路由時(shí),先執(zhí)行,用戶定義的攔截地址 app.use(express.static(__dirname+"/public"));//設(shè)置靜態(tài)資源路徑 app.use(express.errorHandler());//開發(fā)者模塊,將錯(cuò)誤顯示在html上 }); app.get("/adress.do",function(req,res){ //console.log("d-----------1"); //建立數(shù)據(jù)庫連接,建立橋梁 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); }); //關(guān)閉連接 myconn.end(); }); //城市點(diǎn)擊響應(yīng) app.get("/adressMsg.do",function(req,res){ var pmId=req.query.pmId; console.log(pmId); //建立數(shù)據(jù)庫連接,建立橋梁 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); }); //關(guān)閉連接 myconn.end(); }); //監(jiān)聽端口號(hào) app.listen(8888,function(){//監(jiān)聽 console.log("express監(jiān)聽成功!"); console.log(__dirname); });
數(shù)據(jù)庫mysql信息:
/*創(chuàng)建數(shù)據(jù)庫:pet*/ CREATE DATABASE pet; /*寵物店地圖*/ CREATE TABLE petmap(/*寵物店*/ pmId INT AUTO_INCREMENT PRIMARY KEY,/*寵物店id*/ pmName NVARCHAR(60),/*寵物店名*/ pmCity NVARCHAR(20),/*寵物店所在城市*/ pmAddress NVARCHAR(100),/*寵物店所在詳細(xì)地址*/ pmImg VARCHAR(60),/*寵物店圖片*/ pmPhone VARCHAR(30),/*寵物店電話號(hào)碼*/ pmTop FLOAT,/*寵物店位置上面*/ pmLeft FLOAT/*寵物店位置下面*/ ) /*插入信息*/ INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft) VALUES ('邛崍邛臨美多寵物服務(wù)部','成都','成都市邛崍市長松路296號(hào)','map1.png','15202891690',360,320), ('諧和寵物醫(yī)院','德陽','德陽市旌陽區(qū)珠江西路300號(hào)','map2.png','0838-6181255',320,350), ('天寧動(dòng)物醫(yī)院','西安','西安市新城區(qū)韓森路','map3.png','028-81836050',260,240), ('寵美康動(dòng)物醫(yī)院','烏魯木齊','烏魯木齊市天山區(qū)幸福路774號(hào)','map4.png','0991-2654158',210,170), ('綿陽康貝動(dòng)物診所','綿陽','綿陽市游仙區(qū)東津路5-2號(hào)','map5.png','0816-2987186',315,335), ('圣心動(dòng)物醫(yī)院','重慶','重慶市九龍坡區(qū)大公館九龍大廈3-2','map6.png','023-68820999',360,380), ('吉祥寵物醫(yī)院(油榨街店)','貴陽','貴陽市南明區(qū)油榨街花鳥市場寵物區(qū)','map7.png','0851-88275946',400,380), ('常德市武陵區(qū)動(dòng)物醫(yī)院','常德','常德市武陵區(qū)青年路478號(hào)','map8.png','0736-7236814',230,393), ('愛爾寵物','鄭州','鄭州市金水區(qū)金水東路3-6號(hào)','map9.png','0371-69193157',300,453), ('長沙市博旺寵物診所','長沙','長沙市天心區(qū)西牌樓街41號(hào)附近','map10.png','0731-82329801',370,443), ('大嘴狗寵物醫(yī)院','合肥','合肥市廬陽區(qū)北一環(huán)與肥西路交口向南','map11.png','0551-64286773',330,500), ('秦皇島市寵物醫(yī)院','秦皇島','秦皇島市海港區(qū)海陽路9號(hào)','map12.png','0335-3076769',165,540); INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft) VALUES ('乖乖寵寵物醫(yī)院','天津','天津市河?xùn)|區(qū)萬東路77號(hào)(近8630醫(yī)院)','map13.png','13820105131',195,510), ('北京寵物醫(yī)院','北京','北京市西城區(qū)百萬莊北里14號(hào)','map14.png','010-88377484',198,490), ('愛寵之家寵物醫(yī)院','哈爾濱','哈爾濱市南崗區(qū)鼎新三道街37號(hào)','map15.png','0451-82516177',80,625); INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft) VALUES ('拉薩妙妙安心寵物診所','西藏','拉薩市城關(guān)區(qū)納金路城東工商1樓','map16.png','0891-6223291',360,170);
最終結(jié)果:
以上是“如何通過數(shù)據(jù)庫和ajax方法寫出地圖”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!