Write example code for the map through database and ajax method-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Write example code for the map through database and ajax method

亚连

May 23, 2018 am 11:28 AM

ajaxdatabase

AJAX is the art of exchanging data with a server and updating parts of a web page without reloading the entire page. This article mainly introduces relevant information about writing example codes for maps through database and ajax methods. Friends in need can refer to

ajax tutorial

AJAX = Asynchronous JavaScript and XML.

AJAX is not a new programming language, but a new way of using existing standards.

AJAX is the art of exchanging data with a server and updating parts of a web page without reloading the entire page.

Client part: html, js, css code part:

<!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="/static/imghwm/default1.png"  data-src="images/w_map.png"  class="lazy"  / alt="Write example code for the map through database and ajax method" >
<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="/static/imghwm/default1.png"  data-src="images/fi1.png"  class="lazy"     style="max-width:90%"px"+&#39;;left:&#39;+jsonobj[i].pmLeft+"px"+&#39;"/ alt="Write example code for the map through database and ajax method" >&#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="/static/imghwm/default1.png"  data-src="images/&#39;+jsonobj[i].pmImg+&#39;"  class="lazy"  / alt="Write example code for the map through database and ajax method" >&#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>

Server part: app.js (a 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);
});

Database mysql information:

/*创建数据库：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);

Final result:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Ajax gets data through city name

AJAX request queue implementation

MVC meets ajax form validation after bootstrap

The above is the detailed content of Write example code for the map through database and ajax method. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Python vs. JavaScript: A Comparative Analysis for DevelopersMay 09, 2025 am 12:22 AM

The main difference between Python and JavaScript is the type system and application scenarios. 1. Python uses dynamic types, suitable for scientific computing and data analysis. 2. JavaScript adopts weak types and is widely used in front-end and full-stack development. The two have their own advantages in asynchronous programming and performance optimization, and should be decided according to project requirements when choosing.

Python vs. JavaScript: Choosing the Right Tool for the JobMay 08, 2025 am 12:10 AM

Whether to choose Python or JavaScript depends on the project type: 1) Choose Python for data science and automation tasks; 2) Choose JavaScript for front-end and full-stack development. Python is favored for its powerful library in data processing and automation, while JavaScript is indispensable for its advantages in web interaction and full-stack development.

Python and JavaScript: Understanding the Strengths of EachMay 06, 2025 am 12:15 AM

Python and JavaScript each have their own advantages, and the choice depends on project needs and personal preferences. 1. Python is easy to learn, with concise syntax, suitable for data science and back-end development, but has a slow execution speed. 2. JavaScript is everywhere in front-end development and has strong asynchronous programming capabilities. Node.js makes it suitable for full-stack development, but the syntax may be complex and error-prone.

JavaScript's Core: Is It Built on C or C ?May 05, 2025 am 12:07 AM

JavaScriptisnotbuiltonCorC ;it'saninterpretedlanguagethatrunsonenginesoftenwritteninC .1)JavaScriptwasdesignedasalightweight,interpretedlanguageforwebbrowsers.2)EnginesevolvedfromsimpleinterpreterstoJITcompilers,typicallyinC ,improvingperformance.

JavaScript Applications: From Front-End to Back-EndMay 04, 2025 am 12:12 AM

JavaScript can be used for front-end and back-end development. The front-end enhances the user experience through DOM operations, and the back-end handles server tasks through Node.js. 1. Front-end example: Change the content of the web page text. 2. Backend example: Create a Node.js server.

Python vs. JavaScript: Which Language Should You Learn?May 03, 2025 am 12:10 AM

Choosing Python or JavaScript should be based on career development, learning curve and ecosystem: 1) Career development: Python is suitable for data science and back-end development, while JavaScript is suitable for front-end and full-stack development. 2) Learning curve: Python syntax is concise and suitable for beginners; JavaScript syntax is flexible. 3) Ecosystem: Python has rich scientific computing libraries, and JavaScript has a powerful front-end framework.

JavaScript Frameworks: Powering Modern Web DevelopmentMay 02, 2025 am 12:04 AM

The power of the JavaScript framework lies in simplifying development, improving user experience and application performance. When choosing a framework, consider: 1. Project size and complexity, 2. Team experience, 3. Ecosystem and community support.

The Relationship Between JavaScript, C , and BrowsersMay 01, 2025 am 12:06 AM

Introduction I know you may find it strange, what exactly does JavaScript, C and browser have to do? They seem to be unrelated, but in fact, they play a very important role in modern web development. Today we will discuss the close connection between these three. Through this article, you will learn how JavaScript runs in the browser, the role of C in the browser engine, and how they work together to drive rendering and interaction of web pages. We all know the relationship between JavaScript and browser. JavaScript is the core language of front-end development. It runs directly in the browser, making web pages vivid and interesting. Have you ever wondered why JavaScr

See all articles