English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 所在位置
  2. 首页
  3. 经验笔记
  4. 正文

Beispielcode für die Erstellung von Karten durch Datenbank und AJAX-Methode

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:微软雅黑;
}
.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>
<!--html-Teil-->
<div class="content_map">
<!-- Titel-->
<hr class="mLeft"/>
<span>Verwandte Tierkliniken</span>
<hr class="mRight"/>
<!-- Linker Teil: Karte-->
<div id="maplist">
</div>
<!-- Klicken Sie auf den linken Teil, um den linken zu hinzuzufügen: sowie die am Anfang hinzugefügten Informationen-->
<div id="map_right">
<div class="shopMsg">
<img src="images/w_map.png"/>
<div class="pmname">Name des Tierladens: Petjoy Haustiergemeinschaft</div>
<div class="address">Adresse: Changningqu Jixuanlu1258Nummer--1260-Nummer</div>
<div class="phone">Telefonnummer: (021)53018000</div>
</div>
</div>
</div>
<!--js-Code-Teil-->
<script type="text/javascript">
window.onload=function(){
getMap();
}
// Fügen Sie Informationen zur Karte hinzu: ajax
function getMap(){
//Erstellen Sie ein Objekt
var httpReq;
if(window.XMLHttpRequest){
httpReq=new XMLHttpRequest();
}else{
httpReq=new ActiveXObject("Microsoft.XMLHTTP");
}
var maplist=document.getElementById("maplist");//Erhalten Sie die Kartenliste
maplist.innerHTML='';//Leeren Sie die Informationen im Kartenbereich, die im HTML hinzugefügt wurden
// Definieren Sie eine Rückruffunktion, um die von der Datenbank zurückgegebenen Daten zu empfangen.
// onreadystatechange(): Speicherfunktion (oder Funktionsname). Diese Funktion wird aufgerufen, wenn sich der readyState-Attribut ändert
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>';
}
}
}
//Senden Sie eine Anfrage (Öffnen Sie eine Adresse)
httpReq.open("get", "adress.do", true);
//Senden, wenn die Übermittlungsart get ist, senden Sie null; wenn die Übermittlungsart post ist, schreiben Sie die zu sendenden Parameter in das send, wenn es keine gibt, schreiben Sie null
httpReq.send(null);
}
//Information abrufen
function getMessage(a){
console.log("M----------1");
var httpReq;
if(window.XMLHttpRequest){
httpReq=new XMLHttpRequest();
}else{
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">Tierhandlung Name：'+jsonobj[i].pmName+</div>'+
<div class="address">Adresse：'+jsonobj[i].pmAddress+</div>'+
<div class="phone">Telefonnummer：'+jsonobj[i].pmPhone+</div>'+
</div>'
}
}
}
//Anfrage starten
httpReq.open("get", "adressMsg.do?pmId="+a, true);
//Senden
httpReq.send(null);
}
</script>
</body>
</html>

Serverseitiger Teil: app.js (ein JavaScript):

var express=require("express");//express einbinden
var mysql=require("mysql");//mysql einbinden
var app=express();//Ausführen der globalen Funktion in express, Rückgabe eines express-Objekts
app.configure(function(){
app.use(app.router);//Routen, bei der Konfiguration der Routen zuerst ausführen, Benutzerdefinierte Interception-Adresse
app.use(express.static(__dirname+"/public"));//Statische Ressourcenpfad festlegen
app.use(express.errorHandler());//Entwicklermodul, Fehler auf der html-Ansicht anzeigen
);
app.get("/adress.do",function(req,res){
//console.log("d-----------1");
//Datenbankverbindung herstellen, Brücke aufbauen
var myconn=mysql.createConnection({
host:"localhost",
port:"3306,
user:"root",
password:"123456,
database:"pet"
);
//Verbindung öffnen
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);
);
//Verbindung schließen
myconn.end();
);
//Stadt klicken, Antwort
app.get("/adressMsg.do",function(req,res){
var pmId=req.query.pmId;
console.log(pmId);
//Datenbankverbindung herstellen, Brücke aufbauen
var myconn=mysql.createConnection({
host:"localhost",
port:"3306,
user:"root",
password:"123456,
database:"pet"
);
//Verbindung öffnen
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);
);
//Verbindung schließen
myconn.end();
);
//Anhörport
app.listen(8888,function(){//Anhören
console.log("express wird angehört!");
console.log(__dirname);
);

Datenbankmysql-Informationen:

/*Datenbank erstellen: pet*/
CREATE DATABASE pet;
/*Haustierladen Karte*/
CREATE TABLE petmap(/*Haustierladen*/
pmId INT AUTO_INCREMENT PRIMARY KEY,/*ID des Haustierladens*/
pmName NVARCHAR(60),/*Name des Haustierladens*/
pmCity NVARCHAR(20),/*Stadt des Haustierladens*/
pmAddress NVARCHAR(100),/*Detaillierte Adresse des Haustierladens*/
pmImg VARCHAR(60),/*Bilder des Haustierladens*/
pmPhone VARCHAR(30),/*Telefonnummer des Haustierladens*/
pmTop FLOAT,/*Über der Lage des Haustierladens*/
pmLeft FLOAT/*Unter der Lage des Haustierladens*/
)
/*Einfügen von Informationen*/
INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft) 
VALUES ('Qionglai Qionglai Meiduo Haustierserviceabteilung','Chengdu','Chengdu Shi Qionglai Qu Changsong Lu')296号1.png','15202891690,360,320),
('Xiehe Haustierklinik','Deyang','Deyang Shi Jingyang Qu Zhijiang Xi Lu')3002.png','0838-6181255',320,350),
('Tianning Dongwu Yiyuan','Xi'an','Xi'an Shi Xincheng Qu Hanshen Lu','map')3.png','028-81836050,260,240),
('Chongmeikang Dongwu Yiyuan','Wulumuqi','Wulumuqi Shi Tianshan Qu Xingfu Lu')774号4.png','0991-2654158',210,170),
('Mianyang Kangbei Dongwu Zhen','Mianyang','Mianyang Shi Youxian Qu Dongjin Lu')5-2号5.png','0816-2987186',315,335),
('Shengxin Dongwu Yiyuan','Chongqing','Chongqing Shi Jiulongpo Qu Dagongguan Jiulong DaSha')3-26.png','023-68820999',360,380),
('Jixiang Haustierklinik (Youzhajie Geschäfte)','Guiyang','Guiyang Shi Nanming Qu Youzhajie Nonghua Shichang Haustierqu','map')7.png','0851-88275946',400,380),
('Changde Shi Wuling Qu Dongwu Yiyuan','Changde','Changde Shi Wuling Qu Qingnian Lu')478号8.png','0736-7236814',230,393),
('Aier Haustier','Zhengzhou','Zhengzhou Shi Jinsui Qu Jinsui Donglu')3-6号9.png','0371-69193157',300,453),
('Changsha Bo Wang Haustierarztpraxis','Changsha','Changsha Shi Tianxin Qu Xipailou Jie')41in der Nähe10.png','0731-82329801',370,443),
('Großmaul Hund Tierklinik','Hefei','Hefei Shi Luyang Qu Beiyi Huan Yu Feixi Road jiaojiao Xiang Nan','map')11.png','0551-64286773',330,500),
('秦皇岛市宠物医院','秦皇岛','秦皇岛市海港区海阳路9号12.png','0335-3076769',165,540);
INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft) 
VALUES ('乖乖宠宠物医院','天津','天津市河东区万东路77号(近8630医院)13.png','13820105131',195,510),
('北京宠物医院','北京','北京市西城区百万庄北里14号14.png','010-88377484',198,490),
('爱宠之家宠物医院','哈尔滨','哈尔滨市南岗区鼎新三道街37号15.png','0451-82516177',80,625);
INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft) 
VALUES ('拉萨妙妙安心宠物诊所','西藏','拉萨市城关区纳金路城东工商1楼16.png','0891-6223291',360,170);

最终结果：

以上所述是小编为大家介绍的通过数据库和AJAX方法编写地图实例代码，希望对大家有所帮助。如果大家有任何疑问，欢迎给我留言，我会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！

声明：本文内容来源于互联网，版权归原作者所有。内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（在发送邮件时，请将#更换为@进行举报，并提供相关证据。一经查实，本站将立即删除涉嫌侵权内容。）

Grund教程
Gefällt mir