Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to write a map through database and ajax method

2025-03-29 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to write a map through the database and ajax method", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to write a map through the database and ajax method" this article.

Ajax tutorial

AJAX = Asynchronous JavaScript and XML (asynchronous JavaScript and XML).

AJAX is not a new programming language, but a new way to use existing standards.

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

Client part: html, js, css code part:

.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 00; 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: # f0f2mitfeMargaret float:left;/*width:600px;*/width:594px;height:524px;background-color 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: Microsoft Jahr;} .shopMsg .address {color:#000;font-size:20px;margin-top:30px;margin-left:72px Font-family: Microsoft shopMsg;}. Phone {color:#000;font-size:20px;margin-top:30px;margin-left:72px;font-family: Microsoft Yahi;} related pet hospital

Pet shop name: Petjoy Pet Community address: 1258 Jixuan Road, Changning District-1260 Tel: (021) 53018000_window.onload=function () {getMap ();} / add information to the map: ajaxfunction getMap () {/ / create object var httpReq;if (window.XMLHttpRequest) {httpReq=new XMLHttpRequest ();} else {httpReq=new ActiveXObject ("Microsoft.XMLHTTP");} var maplist=document.getElementById ("maplist"); / get map list maplist [XSS _ clean] ='' / / clear the information added to the html in the map / / define the callback function to receive the data from the database response. / / onreadystatechange (): stores the function (or function name). Whenever the readyState property changes, the function 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) is called.

< jsonobj.length;i++) {maplist[xss_clean]+=''+'

'+'

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report