通过数据库和ajax方法写出地图的实例代码-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

通过数据库和ajax方法写出地图的实例代码

亚连

May 23, 2018 am 11:28 AM

ajax pangkalan data

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。这篇文章主要介绍了通过数据库和ajax方法写出地图的实例代码的相关资料,需要的朋友可以参考下

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部分-->
<p class="content_map">
<!-- 标题-->
<hr class="mLeft"/>
<span>相关宠物医院</span>
<hr class="mRight"/>
<!-- 左边部分：地图-->
<p id="maplist">
</p>
<!-- 右边部分点击左边要添加的内容：以及最开始加入的信息-->
<p id="map_right">
<p class="shopMsg">
<img src="images/w_map.png"/>
<p class="pmname">宠物店名：Petjoy宠物社区</p>
<p class="address">地址：长宁区机旋路1258号--1260号</p>
<p class="phone">电话号码：(021)53018000</p>
</p>
</p>
</p>
<!--js代码部分-->
<script type="text/javascript">
window.onload=function(){
getMap();
}
// 向地图添加信息：ajax
function getMap(){
//创建对象
var httpReq;
if(window.XMLHttpRequest){
httpReq=new XMLHttpRequest();
}else{
httpReq=new ActiveXObject("Microsoft.XMLHTTP");
}
var maplist=document.getElementById("maplist");//获取地图列表
maplist.innerHTML=&#39;&#39;;//清空地图里在html里面加的信息
// 定义回调函数，接收从数据库响应回来的数据。
// 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+=&#39;<p class="mapShop">&#39;+
&#39;<img src="images/fi1.png" style="top:&#39;+jsonobj[i].pmTop+"px"+&#39;;left:&#39;+jsonobj[i].pmLeft+"px"+&#39;"/>&#39;+
&#39;<p id="pmcity&#39;+i+&#39;" onclick="getMessage(&#39;+i+&#39;)" style="top:&#39;+jsonobj[i].pmTop+"px"+&#39;;left:&#39;+jsonobj[i].pmLeft+"px"+&#39;;position:absolute;padding-top:20px;&#39;+&#39;">&#39; + jsonobj[i].pmCity + &#39;</p>&#39;+
&#39;</p>&#39;;
}
}
}
//发起请求（打开一个地址）
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();
}else{
httpReq=new ActiveXObject("Microsoft.XMLHTTP");
}
var map_right=document.getElementById("map_right");
map_right.innerHTML=&#39;&#39;;
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+=&#39;<p class="shopMsg">&#39;+
&#39;<img src="images/&#39;+jsonobj[i].pmImg+&#39;"/>&#39;+
&#39;<p class="pmname">宠物店名：&#39;+jsonobj[i].pmName+&#39;</p>&#39;+
&#39;<p class="address">地址：&#39;+jsonobj[i].pmAddress+&#39;</p>&#39;+
&#39;<p class="phone">电话号码：&#39;+jsonobj[i].pmPhone+&#39;</p>&#39;+
&#39;</p>&#39;
}
}
}
//发起请求
httpReq.open("get", "adressMsg.do?pmId="+a, true);
//发送
httpReq.send(null);
}
</script>
</body>
</html>

Salin selepas log masuk

服务端部分：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);
});

Salin selepas log masuk

数据库mysql信息：

/*创建数据库：pet*/
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/*宠物店位置下面*/
)
/*插入信息*/
INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft) 
VALUES (&#39;邛崃邛临美多宠物服务部&#39;,&#39;成都&#39;,&#39;成都市邛崃市长松路296号&#39;,&#39;map1.png&#39;,&#39;15202891690&#39;,360,320),
(&#39;谐和宠物医院&#39;,&#39;德阳&#39;,&#39;德阳市旌阳区珠江西路300号&#39;,&#39;map2.png&#39;,&#39;0838-6181255&#39;,320,350),
(&#39;天宁动物医院&#39;,&#39;西安&#39;,&#39;西安市新城区韩森路&#39;,&#39;map3.png&#39;,&#39;028-81836050&#39;,260,240),
(&#39;宠美康动物医院&#39;,&#39;乌鲁木齐&#39;,&#39;乌鲁木齐市天山区幸福路774号&#39;,&#39;map4.png&#39;,&#39;0991-2654158&#39;,210,170),
(&#39;绵阳康贝动物诊所&#39;,&#39;绵阳&#39;,&#39;绵阳市游仙区东津路5-2号&#39;,&#39;map5.png&#39;,&#39;0816-2987186&#39;,315,335),
(&#39;圣心动物医院&#39;,&#39;重庆&#39;,&#39;重庆市九龙坡区大公馆九龙大厦3-2&#39;,&#39;map6.png&#39;,&#39;023-68820999&#39;,360,380),
(&#39;吉祥宠物医院(油榨街店)&#39;,&#39;贵阳&#39;,&#39;贵阳市南明区油榨街花鸟市场宠物区&#39;,&#39;map7.png&#39;,&#39;0851-88275946&#39;,400,380),
(&#39;常德市武陵区动物医院&#39;,&#39;常德&#39;,&#39;常德市武陵区青年路478号&#39;,&#39;map8.png&#39;,&#39;0736-7236814&#39;,230,393),
(&#39;爱尔宠物&#39;,&#39;郑州&#39;,&#39;郑州市金水区金水东路3-6号&#39;,&#39;map9.png&#39;,&#39;0371-69193157&#39;,300,453),
(&#39;长沙市博旺宠物诊所&#39;,&#39;长沙&#39;,&#39;长沙市天心区西牌楼街41号附近&#39;,&#39;map10.png&#39;,&#39;0731-82329801&#39;,370,443),
(&#39;大嘴狗宠物医院&#39;,&#39;合肥&#39;,&#39;合肥市庐阳区北一环与肥西路交口向南&#39;,&#39;map11.png&#39;,&#39;0551-64286773&#39;,330,500),
(&#39;秦皇岛市宠物医院&#39;,&#39;秦皇岛&#39;,&#39;秦皇岛市海港区海阳路9号&#39;,&#39;map12.png&#39;,&#39;0335-3076769&#39;,165,540);
INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft) 
VALUES (&#39;乖乖宠宠物医院&#39;,&#39;天津&#39;,&#39;天津市河东区万东路77号(近8630医院)&#39;,&#39;map13.png&#39;,&#39;13820105131&#39;,195,510),
(&#39;北京宠物医院&#39;,&#39;北京&#39;,&#39;北京市西城区百万庄北里14号&#39;,&#39;map14.png&#39;,&#39;010-88377484&#39;,198,490),
(&#39;爱宠之家宠物医院&#39;,&#39;哈尔滨&#39;,&#39;哈尔滨市南岗区鼎新三道街37号&#39;,&#39;map15.png&#39;,&#39;0451-82516177&#39;,80,625);
INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft) 
VALUES (&#39;拉萨妙妙安心宠物诊所&#39;,&#39;西藏&#39;,&#39;拉萨市城关区纳金路城东工商1楼&#39;,&#39;map16.png&#39;,&#39;0891-6223291&#39;,360,170);

Salin selepas log masuk

最终结果：

上面是我整理给大家的，希望今后会对大家有帮助。

Ajax 通过城市名获取数据

AJAX请求队列实现

MVC遇上bootstrap后的ajax表单验证

Atas ialah kandungan terperinci 通过数据库和ajax方法写出地图的实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

3 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang lalu By DDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

4 minggu yang lalu By DDD

Panduan Atomfall: Lokasi Item, Panduan Pencarian, dan Petua

1 bulan yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7686

Tutorial Java

1639

Tutorial CakePHP

1393

Tutorial Laravel

1287

Tutorial PHP

1229

Tunjukkan Lagi

Related knowledge

PHP dan Ajax: Membina enjin cadangan autolengkap Jun 02, 2024 pm 08:39 PM

Bina enjin cadangan autolengkap menggunakan PHP dan Ajax: Skrip sisi pelayan: mengendalikan permintaan Ajax dan mengembalikan cadangan (autocomplete.php). Skrip pelanggan: Hantar permintaan Ajax dan cadangan paparan (autocomplete.js). Kes praktikal: Sertakan skrip dalam halaman HTML dan nyatakan pengecam elemen input carian.

iOS 18 menambah fungsi album 'Dipulihkan' baharu untuk mendapatkan semula foto yang hilang atau rosak Jul 18, 2024 am 05:48 AM

Keluaran terbaharu Apple bagi sistem iOS18, iPadOS18 dan macOS Sequoia telah menambah ciri penting pada aplikasi Photos, yang direka untuk membantu pengguna memulihkan foto dan video yang hilang atau rosak dengan mudah disebabkan pelbagai sebab. Ciri baharu ini memperkenalkan album yang dipanggil "Dipulihkan" dalam bahagian Alat pada apl Foto yang akan muncul secara automatik apabila pengguna mempunyai gambar atau video pada peranti mereka yang bukan sebahagian daripada pustaka foto mereka. Kemunculan album "Dipulihkan" menyediakan penyelesaian untuk foto dan video yang hilang akibat kerosakan pangkalan data, aplikasi kamera tidak disimpan ke pustaka foto dengan betul, atau aplikasi pihak ketiga yang menguruskan pustaka foto. Pengguna hanya memerlukan beberapa langkah mudah

Bagaimanakah Hibernate melaksanakan pemetaan polimorfik? Apr 17, 2024 pm 12:09 PM

Pemetaan polimorfik hibernate boleh memetakan kelas yang diwarisi ke pangkalan data dan menyediakan jenis pemetaan berikut: subkelas bercantum: Cipta jadual berasingan untuk subkelas, termasuk semua lajur kelas induk. table-per-class: Cipta jadual berasingan untuk subkelas, yang mengandungi hanya lajur khusus subkelas. union-subclass: serupa dengan joined-subclass, tetapi jadual kelas induk menggabungkan semua lajur subclass.

Tutorial terperinci tentang mewujudkan sambungan pangkalan data menggunakan MySQLi dalam PHP Jun 04, 2024 pm 01:42 PM

Cara menggunakan MySQLi untuk mewujudkan sambungan pangkalan data dalam PHP: Sertakan sambungan MySQLi (require_once) Cipta fungsi sambungan (functionconnect_to_db) Fungsi sambungan panggilan ($conn=connect_to_db()) Laksanakan pertanyaan ($result=$conn->query()) Tutup sambungan ( $conn->close())

Bagaimana untuk mengendalikan ralat sambungan pangkalan data dalam PHP Jun 05, 2024 pm 02:16 PM

Untuk mengendalikan ralat sambungan pangkalan data dalam PHP, anda boleh menggunakan langkah berikut: Gunakan mysqli_connect_errno() untuk mendapatkan kod ralat. Gunakan mysqli_connect_error() untuk mendapatkan mesej ralat. Dengan menangkap dan mengelog mesej ralat ini, isu sambungan pangkalan data boleh dikenal pasti dan diselesaikan dengan mudah, memastikan kelancaran aplikasi anda.

PHP lwn. Ajax: Penyelesaian untuk mencipta kandungan yang dimuatkan secara dinamik Jun 06, 2024 pm 01:12 PM

Ajax (JavaScript Asynchronous dan XML) membenarkan menambah kandungan dinamik tanpa memuatkan semula halaman. Menggunakan PHP dan Ajax, anda boleh memuatkan senarai produk secara dinamik: HTML mencipta halaman dengan elemen kontena dan permintaan Ajax menambah data pada elemen selepas memuatkannya. JavaScript menggunakan Ajax untuk menghantar permintaan kepada pelayan melalui XMLHttpRequest untuk mendapatkan data produk dalam format JSON daripada pelayan. PHP menggunakan MySQL untuk menanyakan data produk daripada pangkalan data dan mengekodnya ke dalam format JSON. JavaScript menghuraikan data JSON dan memaparkannya dalam bekas halaman. Mengklik butang mencetuskan permintaan Ajax untuk memuatkan senarai produk.

Bagaimana untuk menggunakan fungsi panggil balik pangkalan data di Golang? Jun 03, 2024 pm 02:20 PM

Menggunakan fungsi panggil balik pangkalan data di Golang boleh mencapai: melaksanakan kod tersuai selepas operasi pangkalan data yang ditentukan selesai. Tambah tingkah laku tersuai melalui fungsi berasingan tanpa menulis kod tambahan. Fungsi panggil balik tersedia untuk operasi memasukkan, mengemas kini, memadam dan pertanyaan. Anda mesti menggunakan fungsi sql.Exec, sql.QueryRow atau sql.Query untuk menggunakan fungsi panggil balik.

Bagaimana untuk menyambung ke pangkalan data jauh menggunakan Golang? Jun 01, 2024 pm 08:31 PM

Melalui pakej pangkalan data/sql perpustakaan standard Go, anda boleh menyambung ke pangkalan data jauh seperti MySQL, PostgreSQL atau SQLite: buat rentetan sambungan yang mengandungi maklumat sambungan pangkalan data. Gunakan fungsi sql.Open() untuk membuka sambungan pangkalan data. Lakukan operasi pangkalan data seperti pertanyaan SQL dan operasi sisipan. Gunakan tangguh untuk menutup sambungan pangkalan data untuk mengeluarkan sumber.

See all articles