データベースと Ajax メソッドを使用してマップのサンプルコードを作成する-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

データベースと Ajax メソッドを使用してマップのサンプルコードを作成する

亚连

May 23, 2018 am 11:28 AM

ajaxデータベース

AJAX は、サーバーとデータを交換し、ページ全体をリロードせずに Web ページの一部を更新する技術です。この記事では主に、データベースおよび ajax メソッドを使用したマップのサンプルコードの記述に関する関連情報を紹介します。必要な場合は、

ajax チュートリアル

AJAX = Asynchronous JavaScript and XML (asynchronous JavaScript and 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="/static/imghwm/default1.png"  data-src="images/w_map.png"  class="lazy"  / alt="データベースと Ajax メソッドを使用してマップのサンプル コードを作成する" >
<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="データベースと Ajax メソッドを使用してマップのサンプル コードを作成する" >&#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="データベースと Ajax メソッドを使用してマップのサンプル コードを作成する" >&#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);

ファイナル結果:

上記は私が皆さんのためにまとめたもので、将来皆さんのお役に立てれば幸いです。

Ajaxは都市名を通じてデータを取得

AJAXリクエストキューの実装

MVCはブートストラップ後にAjaxフォーム検証を満たします

以上がデータベースと Ajax メソッドを使用してマップのサンプルコードを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Scrapy基于Ajax异步加载实现方法Jun 22, 2023 pm 11:09 PM

Scrapy是一个开源的Python爬虫框架，它可以快速高效地从网站上获取数据。然而，很多网站采用了Ajax异步加载技术，使得Scrapy无法直接获取数据。本文将介绍基于Ajax异步加载的Scrapy实现方法。一、Ajax异步加载原理Ajax异步加载：在传统的页面加载方式中，浏览器发送请求到服务器后，必须等待服务器返回响应并将页面全部加载完毕才能进行下一步操

如何使用CakePHP中的AJAX？Jun 04, 2023 pm 08:01 PM

作为一种基于MVC模式的PHP框架，CakePHP已成为许多Web开发人员的首选。它的结构简单，易于扩展，而其中的AJAX技术更是让开发变得更加高效。在本文中，将介绍如何使用CakePHP中的AJAX。什么是AJAX?在介绍如何在CakePHP中使用AJAX之前，我们先来了解一下什么是AJAX。AJAX是“异步JavaScript和XML”的缩写，是指一种在

jquery ajax报错403怎么办Nov 30, 2022 am 10:09 AM

jquery ajax报错403是因为前端和服务器的域名不同而触发了防盗链机制，其解决办法：1、打开相应的代码文件；2、通过“public CorsFilter corsFilter() {...}”方法设置允许的域即可。

ajax传递中文乱码怎么办Nov 15, 2023 am 10:42 AM

ajax传递中文乱码的解决办法：1、设置统一的编码方式；2、服务器端编码；3、客户端解码；4、设置HTTP响应头；5、使用JSON格式。详细介绍：1、设置统一的编码方式，确保服务器端和客户端使用相同的编码方式，通常情况下，UTF-8是一种常用的编码方式，因为它可以支持多种语言和字符集；2、服务器端编码，在服务器端，确保将中文数据以正确的编码方式进行编码，再传递给客户端等等。

Nginx中404页面怎么配置及AJAX请求返回404页面May 26, 2023 pm 09:47 PM

404页面基础配置404错误是www网站访问容易出现的错误。最常见的出错提示：404notfound。404错误页的设置对网站seo有很大的影响，而设置不当，比如直接转跳主页等，会被搜索引擎降权拔毛。404页面的目的应该是告诉用户：你所请求的页面是不存在的，同时引导用户浏览网站其他页面而不是关掉窗口离去。搜索引擎通过http状态码来识别网页的状态。当搜索引擎获得了一个错误链接时，网站应该返回404状态码，告诉搜索引擎放弃对该链接的索引。而如果返回200或302状态码，搜索引擎就会为该链接建立索引

什么是ajax重构Jul 01, 2022 pm 05:12 PM

ajax重构指的是在不改变软件现有功能的基础上，通过调整程序代码改善软件的质量、性能，使其程序的设计模式和架构更合理，提高软件的扩展性和维护性；Ajax的实现主要依赖于XMLHttpRequest对象，由于该对象的实例在处理事件完成后就会被销毁，所以在需要调用它的时候就要重新构建。

在Laravel中如何通过Ajax请求传递CSRF令牌？Sep 10, 2023 pm 03:09 PM

CSRF代表跨站请求伪造。CSRF是未经授权的用户冒充授权执行的恶意活动。Laravel通过为每个活动用户会话生成csrf令牌来保护此类恶意活动。令牌存储在用户的会话中。如果会话发生变化，它总是会重新生成，因此每个会话都会验证令牌，以确保授权用户正在执行任何任务。以下是访问csrf_token的示例。生成csrf令牌您可以通过两种方式获取令牌。通过使用$request→session()→token()直接使用csrf_token()方法示例<?phpnamespaceApp\Http\C

使用HTML5文件上传与AJAX和jQuerySep 13, 2023 am 10:09 AM

当提交表单时，捕获提交过程并尝试运行以下代码片段来上传文件-//File1varmyFile=document.getElementById('fileBox').files[0];varreader=newFileReader();reader.readAsText(file,'UTF-8');reader.onload=myFunc;functionmyFunc(event){  varres

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。