データベース＋Ajaxメソッドを利用したマップインターフェースの実装方法
今回はデータベース＋ajax方式でマップインターフェースを実装する方法を紹介します。データベース＋ajax方式でマップインターフェースを実装する際の注意点は何ですか？実際の事例を見てみましょう。
ajax チュートリアル
AJAX = 非同期 JavaScript および XML (非同期 JavaScript および XML)。
AJAX は新しい プログラミング言語 ではなく、既存の標準を使用する新しい方法です。
AJAX は、サーバーとデータを交換し、ページ全体をリロードせずに Web ページの一部を更新する技術です。
クライアント部分: 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='';//清空地图里在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+='<p class="mapShop">'+
'<img src="images/fi1.png" style="top:'+jsonobj[i].pmTop+"px"+';left:'+jsonobj[i].pmLeft+"px"+'"/>'+
'<p 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 + '</p>'+
'</p>';
}
}
}
//发起请求（打开一个地址）
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='';
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+='<p class="shopMsg">'+
'<img src="images/'+jsonobj[i].pmImg+'"/>'+
'<p class="pmname">宠物店名：'+jsonobj[i].pmName+'</p>'+
'<p class="address">地址：'+jsonobj[i].pmAddress+'</p>'+
'<p class="phone">电话号码：'+jsonobj[i].pmPhone+'</p>'+
'</p>'
}
}
}
//发起请求
httpReq.open("get", "adressMsg.do?pmId="+a, true);
//发送
httpReq.send(null);
}
</script>
</body>
</html>サーバー部分: 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);
});データベース 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 ('邛崃邛临美多宠物服务部','成都','成都市邛崃市长松路296号','map1.png','15202891690',360,320),
('谐和宠物医院','德阳','德阳市旌阳区珠江西路300号','map2.png','0838-6181255',320,350),
('天宁动物医院','西安','西安市新城区韩森路','map3.png','028-81836050',260,240),
('宠美康动物医院','乌鲁木齐','乌鲁木齐市天山区幸福路774号','map4.png','0991-2654158',210,170),
('绵阳康贝动物诊所','绵阳','绵阳市游仙区东津路5-2号','map5.png','0816-2987186',315,335),
('圣心动物医院','重庆','重庆市九龙坡区大公馆九龙大厦3-2','map6.png','023-68820999',360,380),
('吉祥宠物医院(油榨街店)','贵阳','贵阳市南明区油榨街花鸟市场宠物区','map7.png','0851-88275946',400,380),
('常德市武陵区动物医院','常德','常德市武陵区青年路478号','map8.png','0736-7236814',230,393),
('爱尔宠物','郑州','郑州市金水区金水东路3-6号','map9.png','0371-69193157',300,453),
('长沙市博旺宠物诊所','长沙','长沙市天心区西牌楼街41号附近','map10.png','0731-82329801',370,443),
('大嘴狗宠物医院','合肥','合肥市庐阳区北一环与肥西路交口向南','map11.png','0551-64286773',330,500),
('秦皇岛市宠物医院','秦皇岛','秦皇岛市海港区海阳路9号','map12.png','0335-3076769',165,540);
INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft)
VALUES ('乖乖宠宠物医院','天津','天津市河东区万东路77号(近8630医院)','map13.png','13820105131',195,510),
('北京宠物医院','北京','北京市西城区百万庄北里14号','map14.png','010-88377484',198,490),
('爱宠之家宠物医院','哈尔滨','哈尔滨市南岗区鼎新三道街37号','map15.png','0451-82516177',80,625);
INSERT INTO petmap(pmName,pmCity,pmAddress,pmImg,pmPhone,pmTop,pmLeft)
VALUES ('拉萨妙妙安心宠物诊所','西藏','拉萨市城关区纳金路城东工商1楼','map16.png','0891-6223291',360,170);最終結果:
この記事の場合、あなたはその方法をマスターしました。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
以上がデータベース＋Ajaxメソッドを利用したマップインターフェースの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7658
15
1393
52
91
11
39
156
Go 言語はデータベースの追加、削除、変更、クエリ操作をどのように実装しますか?
Mar 27, 2024 pm 09:39 PM
Go 言語は、効率的かつ簡潔で習得が容易なプログラミング言語であり、同時プログラミングやネットワーク プログラミングに優れているため、開発者に好まれています。実際の開発ではデータベースの操作が欠かせませんが、今回はGo言語を使ってデータベースの追加・削除・変更・クエリ操作を実装する方法を紹介します。 Go 言語では、データベースを操作するために通常、よく使用される SQL パッケージや gorm などのサードパーティ ライブラリを使用します。ここでは SQL パッケージを例として、データベースの追加、削除、変更、クエリ操作を実装する方法を紹介します。 MySQL データベースを使用していると仮定します。
iOS 18では、紛失または破損した写真を復元するための新しい「復元」アルバム機能が追加されます
Jul 18, 2024 am 05:48 AM
Apple の最新リリースの iOS18、iPadOS18、および macOS Sequoia システムでは、さまざまな理由で紛失または破損した写真やビデオをユーザーが簡単に回復できるように設計された重要な機能が写真アプリケーションに追加されました。この新機能では、写真アプリのツール セクションに「Recovered」というアルバムが導入され、ユーザーがデバイス上に写真ライブラリに含まれていない写真やビデオがある場合に自動的に表示されます。 「Recovered」アルバムの登場により、データベースの破損、カメラ アプリケーションが写真ライブラリに正しく保存されない、または写真ライブラリを管理するサードパーティ アプリケーションによって失われた写真やビデオに対する解決策が提供されます。ユーザーはいくつかの簡単な手順を実行するだけで済みます
Hibernate はポリモーフィック マッピングをどのように実装しますか?
Apr 17, 2024 pm 12:09 PM
Hibernate ポリモーフィック マッピングは、継承されたクラスをデータベースにマップでき、次のマッピング タイプを提供します。 join-subclass: 親クラスのすべての列を含む、サブクラス用の別個のテーブルを作成します。 table-per-class: サブクラス固有の列のみを含む、サブクラス用の別個のテーブルを作成します。 Union-subclass: join-subclass と似ていますが、親クラス テーブルがすべてのサブクラス列を結合します。
PHP で MySQLi を使用してデータベース接続を確立するための詳細なチュートリアル
Jun 04, 2024 pm 01:42 PM
MySQLi を使用して PHP でデータベース接続を確立する方法: MySQLi 拡張機能を含める (require_once) 接続関数を作成する (functionconnect_to_db) 接続関数を呼び出す ($conn=connect_to_db()) クエリを実行する ($result=$conn->query()) 閉じる接続 ( $conn->close())
HTML がデータベースを読み取る方法の詳細な分析
Apr 09, 2024 pm 12:36 PM
HTML はデータベースを直接読み取ることはできませんが、JavaScript と AJAX を通じて実現できます。この手順には、データベース接続の確立、クエリの送信、応答の処理、ページの更新が含まれます。この記事では、JavaScript、AJAX、および PHP を使用して MySQL データベースからデータを読み取る実践的な例を示し、クエリ結果を HTML ページに動的に表示する方法を示します。この例では、XMLHttpRequest を使用してデータベース接続を確立し、クエリを送信して応答を処理することで、ページ要素にデータを埋め込み、データベースを読み取る HTML の機能を実現します。
PHP でデータベース接続エラーを処理する方法
Jun 05, 2024 pm 02:16 PM
PHP でデータベース接続エラーを処理するには、次の手順を使用できます。 mysqli_connect_errno() を使用してエラー コードを取得します。 mysqli_connect_error() を使用してエラー メッセージを取得します。これらのエラー メッセージをキャプチャしてログに記録することで、データベース接続の問題を簡単に特定して解決でき、アプリケーションをスムーズに実行できるようになります。
PHP を使用してデータベース内の中国語の文字化けを処理するためのヒントと実践
Mar 27, 2024 pm 05:21 PM
PHP は Web サイト開発で広く使用されているバックエンド プログラミング言語であり、強力なデータベース操作機能を備えており、MySQL などのデータベースとの対話によく使用されます。ただし、中国語の文字エンコーディングは複雑であるため、データベース内で中国語の文字化けを処理するときに問題が発生することがよくあります。この記事では、文字化けの一般的な原因、解決策、具体的なコード例を含め、データベース内の中国語の文字化けを処理するための PHP のスキルと実践方法を紹介します。文字化けの一般的な原因は、データベースの文字セット設定が正しくないことです。データベースの作成時に、utf8 や u などの正しい文字セットを選択する必要があります。
Golangでデータベースコールバック関数を使用するにはどうすればよいですか?
Jun 03, 2024 pm 02:20 PM
Golang でデータベース コールバック関数を使用すると、次のことを実現できます。 指定されたデータベース操作が完了した後にカスタム コードを実行します。追加のコードを記述せずに、個別の関数を通じてカスタム動作を追加します。コールバック関数は、挿入、更新、削除、クエリ操作に使用できます。コールバック関数を使用するには、sql.Exec、sql.QueryRow、または sql.Query 関数を使用する必要があります。
