데이터베이스 및 Ajax 메소드를 통해 지도에 대한 예제 코드 작성-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

데이터베이스 및 Ajax 메소드를 통해 지도에 대한 예제 코드 작성

亚连

May 23, 2018 am 11:28 AM

ajax 데이터 베이스

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>

로그인 후 복사

서버 부분: 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 (&#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);

로그인 후 복사

최종 결과:

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7416

Cakephp 튜토리얼

1359

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

Related knowledge

Go 언어는 데이터베이스의 추가, 삭제, 수정 및 쿼리 작업을 어떻게 구현합니까? Mar 27, 2024 pm 09:39 PM

Go 언어는 효율적이고 간결하며 배우기 쉬운 프로그래밍 언어입니다. 동시 프로그래밍과 네트워크 프로그래밍의 장점 때문에 개발자들이 선호합니다. 실제 개발에서 데이터베이스 작업은 필수적인 부분입니다. 이 기사에서는 Go 언어를 사용하여 데이터베이스 추가, 삭제, 수정 및 쿼리 작업을 구현하는 방법을 소개합니다. Go 언어에서는 일반적으로 사용되는 SQL 패키지, Gorm 등과 같은 타사 라이브러리를 사용하여 데이터베이스를 운영합니다. 여기서는 sql 패키지를 예로 들어 데이터베이스의 추가, 삭제, 수정 및 쿼리 작업을 구현하는 방법을 소개합니다. MySQL 데이터베이스를 사용하고 있다고 가정합니다.

Hibernate는 어떻게 다형성 매핑을 구현합니까? Apr 17, 2024 pm 12:09 PM

Hibernate 다형성 매핑은 상속된 클래스를 데이터베이스에 매핑할 수 있으며 다음 매핑 유형을 제공합니다. Join-subclass: 상위 클래스의 모든 열을 포함하여 하위 클래스에 대한 별도의 테이블을 생성합니다. 클래스별 테이블: 하위 클래스별 열만 포함하는 하위 클래스에 대한 별도의 테이블을 만듭니다. Union-subclass: Joined-subclass와 유사하지만 상위 클래스 테이블이 모든 하위 클래스 열을 통합합니다.

iOS 18에는 손실되거나 손상된 사진을 검색할 수 있는 새로운 '복구된' 앨범 기능이 추가되었습니다. Jul 18, 2024 am 05:48 AM

Apple의 최신 iOS18, iPadOS18 및 macOS Sequoia 시스템 릴리스에는 사진 애플리케이션에 중요한 기능이 추가되었습니다. 이 기능은 사용자가 다양한 이유로 손실되거나 손상된 사진과 비디오를 쉽게 복구할 수 있도록 설계되었습니다. 새로운 기능에는 사진 앱의 도구 섹션에 '복구됨'이라는 앨범이 도입되었습니다. 이 앨범은 사용자가 기기에 사진 라이브러리에 포함되지 않은 사진이나 비디오를 가지고 있을 때 자동으로 나타납니다. "복구된" 앨범의 출현은 데이터베이스 손상으로 인해 손실된 사진과 비디오, 사진 라이브러리에 올바르게 저장되지 않은 카메라 응용 프로그램 또는 사진 라이브러리를 관리하는 타사 응용 프로그램에 대한 솔루션을 제공합니다. 사용자는 몇 가지 간단한 단계만 거치면 됩니다.

HTML이 데이터베이스를 읽는 방법에 대한 심층 분석 Apr 09, 2024 pm 12:36 PM

HTML은 데이터베이스를 직접 읽을 수 없지만 JavaScript 및 AJAX를 통해 읽을 수 있습니다. 단계에는 데이터베이스 연결 설정, 쿼리 보내기, 응답 처리 및 페이지 업데이트가 포함됩니다. 이 기사에서는 JavaScript, AJAX 및 PHP를 사용하여 MySQL 데이터베이스에서 데이터를 읽는 실제 예제를 제공하고 쿼리 결과를 HTML 페이지에 동적으로 표시하는 방법을 보여줍니다. 이 예제에서는 XMLHttpRequest를 사용하여 데이터베이스 연결을 설정하고 쿼리를 보내고 응답을 처리함으로써 페이지 요소에 데이터를 채우고 데이터베이스를 읽는 HTML 기능을 실현합니다.

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())

PHP에서 데이터베이스 연결 오류를 처리하는 방법 Jun 05, 2024 pm 02:16 PM

PHP에서 데이터베이스 연결 오류를 처리하려면 다음 단계를 사용할 수 있습니다. mysqli_connect_errno()를 사용하여 오류 코드를 얻습니다. 오류 메시지를 얻으려면 mysqli_connect_error()를 사용하십시오. 이러한 오류 메시지를 캡처하고 기록하면 데이터베이스 연결 문제를 쉽게 식별하고 해결할 수 있어 애플리케이션이 원활하게 실행될 수 있습니다.

PHP 및 Ajax: 자동 완성 제안 엔진 구축 Jun 02, 2024 pm 08:39 PM

PHP 및 Ajax를 사용하여 자동 완성 제안 엔진 구축: 서버측 스크립트: Ajax 요청을 처리하고 제안을 반환합니다(autocomplete.php). 클라이언트 스크립트: Ajax 요청을 보내고 제안을 표시합니다(autocomplete.js). 실제 사례: HTML 페이지에 스크립트를 포함하고 검색 입력 요소 식별자를 지정합니다.

PHP 대 Ajax: 동적으로 로드되는 콘텐츠를 생성하기 위한 솔루션 Jun 06, 2024 pm 01:12 PM

Ajax(비동기 JavaScript 및 XML)를 사용하면 페이지를 다시 로드하지 않고도 동적 콘텐츠를 추가할 수 있습니다. PHP와 Ajax를 사용하면 제품 목록을 동적으로 로드할 수 있습니다. HTML은 컨테이너 요소가 있는 페이지를 생성하고 Ajax 요청은 로드한 후 요소에 데이터를 추가합니다. JavaScript는 Ajax를 사용하여 XMLHttpRequest를 통해 서버에 요청을 보내 서버에서 JSON 형식의 제품 데이터를 얻습니다. PHP는 MySQL을 사용하여 데이터베이스에서 제품 데이터를 쿼리하고 이를 JSON 형식으로 인코딩합니다. JavaScript는 JSON 데이터를 구문 분석하여 페이지 컨테이너에 표시합니다. 버튼을 클릭하면 제품 목록을 로드하라는 Ajax 요청이 트리거됩니다.

See all articles

데이터베이스 및 Ajax 메소드를 통해 지도에 대한 예제 코드 작성

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제