首先簡要介紹我的程式的結構以及要實現的功能: 簡而言之,該程式主要功能是實現將已知地址經緯度的某個點在地圖上在地圖上顯示出來,程式主要分為三個模組:分別是前端(html+css+js)、後台(php)、資料庫(mysql),三模組分別實作下列功能。
資料庫:儲存某個地點的經緯度資訊(因為所做專案要求顯示的是公司某個硬體設備的所在地,所以,我稱之為-設備位址);
後台:本後台實現的功能主要是透過sql語句查詢到資料庫裡滿足條件的設備的位址資訊(經緯度),然後將這些位址資訊以json格式輸出,讓前端頁面可以透過ajax方式取得;
//后台代码:<?phpsession_start ();//查找数据库header ( "Content-type:text/html;charset=utf-8" );include "conn.php"; mysql_query("set names utf8");//读取旧信息$startTime = date("Y-m-d H:i:s", strtotime('-300 minutes', time()));$UserName = $_SESSION['UserName'];//echo $UserName ;//$UserName = 'wld';$sql = "select * from user_device where UserName='".$UserName."' and UseFlag=1";$result_set = mysql_query($sql);$snstr=0;$longstr=0;$lastr=0;$statusstr=0; while($row=mysql_fetch_array($result_set)){ $sql = "select * from device where SN='".$row['SN']."'"; $res = mysql_query($sql); $result=mysql_fetch_assoc($res); /////////////////////////在线监测///////////////////// $sql_queryt="SELECT * FROM device_online_list WHERE SN='".$SN."' order by Time desc limit 1"; $result_sett=mysql_query($sql_queryt); $resultt=mysql_fetch_assoc($result_sett); if($result_sett) { if(strtotime($startTime)<strtotime($resultt['Time'])) { $runstr=1; } else $runstr=0; }else $runstr=0; /////////////////////////////////////////////////////// if($snstr){ $snstr=$snstr.'_'; $snstr=$snstr.$row['SN']; $longstr=$longstr.'_'; $longstr=$longstr.$result[Longtitude]; $lastr=$lastr.'_'; $lastr=$lastr.$result[Latitude]; $statusstr=$statusstr.'_'; $statusstr=$statusstr.$runstr; }else{ $snstr=$row['SN']; $longstr=$result[Longtitude]; $lastr=$result[Latitude]; $statusstr=$runstr; } }$resultJson = array("SNstr"=>$snstr, "Long"=>$longstr, "La"=>$lastr,"Status"=>$statusstr);//json格式的数组echo urldecode(json_encode($resultJson));//Json格式输出 */?>
前端:前端的主要功能是,透過呼叫百度地圖api,顯示一張地圖,並將透過js(ajax)從後台取得的經緯度資訊作為位置參數填入地圖描點函數裡,實現在地圖上顯示某個點的功能(當然,我的程式碼裡從後台獲取的資訊並不只有經緯度,但因為是一個地圖程序,關注焦點主要在經緯度上,所以闡述過程中只提經緯度,忽略其他資訊);
//下面是前端代码:<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>设备地图</title> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #dev_map{height:500px;width:100%;} </style> <script type="text/javascript" src="jquery-1.12.1.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?&v=1.3"></script></head><body><p class="dev_map" id="dev_map"></p><!-- <p><button type="button" onclick="theLocation()">设备地图</button></p> --></body></html><script>var map = new BMap.Map("dev_map"); // 创建Map实例map.centerAndZoom(new BMap.Point(114.317, 30.594), 5); // 初始化地图,设置中心点坐标和地图级别//添加地图类型控件map.addControl(new BMap.MapTypeControl({ mapTypes:[ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]})); map.setCurrentCity("武汉"); // 设置地图显示的城市 此项是必须设置的map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放var arr_longitude = new Array();var arr_latitude = new Array();var arr_sn = new Array();var arr_status = new Array();var arr_point = new Array();var mapSpots = new Array;var url = "http://image.tupian114.com/20140419/09274112.png";var content;var myIcon = new BMap.Icon(url, new BMap.Size(40,30));var opts = { width : 180, // 信息窗口宽度 height: 180, // 信息窗口高度 title : "信息窗口" , // 信息窗口标题 enableMessage:true//设置允许信息窗发送短息 };// //获取经纬度 $(function() { $.ajax({ url: "mysql.search.handle.php", type: "GET", dataType:"json", async:false, success:function(data) { //alert(data.Long.split("_").length); for(var i=0;i<data.Long.split("_").length;i++) { arr_longitude[i]=data.Long.split("_")[i]; arr_latitude[i] = data.La.split("_")[i]; arr_sn[i] = data.SNstr.split("_")[i]; arr_status[i] = data.Status.split("_")[i]; arr_point[i] = new BMap.Point(arr_longitude[i],arr_latitude[i]); // marker = new BMap.Marker(arr_point[i]); // map.addOverlay(marker); } addSpots(data.Long.split("_").length); } }); }); function addSpots(arr_length){ alert("您有"+arr_length+"台设备!"); for(var i=0;i<arr_length;i++) { content = ""; content = "<p><span>SN码:" + arr_sn[i] + "</span></br>" + "<span>设备状态:" + translateOnline(arr_status[i]) + "</span></br>" + "<p class='btn'><a href='../DevAlarm/DevAla.html?SN=" + arr_sn[i] + "' target='fname'" + "'>报警配置</a></p>" +"<p class='btn'><a href='../DevAlarmView/DevAlarmView.html?SN=" + arr_sn[i] + "' target='fname'" + "'>报警信息</a></p>"+"<p class='btn'><a href='../DevRun/DevRun.html?SN=" + arr_sn[i] + "' target='fname'" + "'>实时数据</a></p>"+"<p class='btn'><a href='../history/history.html?SN=" + arr_sn[i] + "' target='fname'" + "'>历史数据</a></p>"+"<p class='btn'><a href='../DevCfg/DevCfg.html?SN=" + arr_sn[i] + "' target='fname'" + "'>数据可视与报警开关配置</a></p>"; marker = new BMap.Marker(arr_point[i]); map.addOverlay(marker); //var lable = new BMap.Label(content,{offset:new BMap.Size(20,-10)}); //marker.setLabel(lable); addClickHandler(content,marker); //添加点击处理程序(点击会出现sn码等信息) } }function addClickHandler(content,marker){ marker.addEventListener("click",function(e){ openInfo(content,e)} ); }function translateOnline(code){ if (code == 0) {return "离线";} else if(code == 1) {return "在线";} else{return "error";} }function openInfo(content,e){ var p = e.target; var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow,point); //开启信息窗口}</script>
這裡我們只關注js部分的程式碼,在下面把這些關鍵程式碼重新貼出來方便觀看:
var arr_longitude = new Array();var arr_latitude = new Array();var arr_sn = new Array();var arr_status = new Array();var arr_point = new Array();var mapSpots = new Array;var url = "http://image.tupian114.com/20140419/09274112.png";var content;var myIcon = new BMap.Icon(url, new BMap.Size(40,30));var opts = { width : 180, // 信息窗口宽度 height: 180, // 信息窗口高度 title : "信息窗口" , // 信息窗口标题 enableMessage:true//设置允许信息窗发送短息 };// //获取经纬度 $(function() { $.ajax({ url: "mysql.search.handle.php", type: "GET", dataType:"json", async:false, success:function(data) { // alert(data.Status);//弹出接收到的数据,调试用 // alert(data.La);//弹出接收到的数据,调试用 // alert(data.SNstr);//弹出接收到的数据,调试用 // alert(data.Long.split("_").length);//split是实现从一串用特定符号来连接的字符串中一次提取有用字符的功能(如me_you_he 用‘_’连接,用split可实现对me、you、he进行提取) var longstring=data.Long+''; var lastring=data.La+''; var SNstring=data.SNstr+''; var Statusstring=data.Status+''; for(var i=0;i < longstring.split("_").length;i++) { arr_longitude[i]=longstring.split("_")[i]; arr_latitude[i] = lastring.split("_")[i]; arr_sn[i] = SNstring.split("_")[i]; arr_status[i] = Statusstring.split("_")[i]; // alert("设备状态"+arr_status[i]); arr_point[i] = new BMap.Point(arr_longitude[i],arr_latitude[i]); marker = new BMap.Marker(arr_point[i]); map.addOverlay(marker); } addSpots(longstring.split("_").length); } , error: function(XMLHttpRequest, textStatus, errorThrown) {//这个error函数调试时非常有用,如果解析不正确,将会弹出错误框 alert(XMLHttpRequest.responseText); alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); // parser error; } }); });
在最初寫程式碼過程中,後台因為調試程式的需要,在程式中echo了很多調試訊息,如圖:
,但是這些訊息並不是json格式的,當這些非json格式的訊息被echo後,會被前台接收到。但前台的ajax是指定以json格式接收的,所以當接收到非json格式的文件後,ajax程式不會進入success裡執行,而是進入error裡彈出錯誤訊息,同時,瀏覽器會根據種類不同彈出諸如:
XML 錯誤:找不到根目錄(火狐firefox)、flie could not be load :……(Googlechrome)等錯誤。
經驗教訓:當後台透過json格式輸出資料以供前台get時,切記,除了echo輸出有用資料時,不可用echo輸出其他一切無用數據,否則會造成前台資料接收格式出錯。
以上為本人做專案過程中的一點小經驗,如有謬誤,請批評指正! 、
相關推薦:
以上是PHP中echo語句濫用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

Sessionlockingisatechniqueusedtoensureauser'ssessionremainsexclusivetooneuseratatime.Itiscrucialforpreventingdatacorruptionandsecuritybreachesinmulti-userapplications.Sessionlockingisimplementedusingserver-sidelockingmechanisms,suchasReentrantLockinJ

PHP會話的替代方案包括Cookies、Token-basedAuthentication、Database-basedSessions和Redis/Memcached。 1.Cookies通過在客戶端存儲數據來管理會話,簡單但安全性低。 2.Token-basedAuthentication使用令牌驗證用戶,安全性高但需額外邏輯。 3.Database-basedSessions將數據存儲在數據庫中,擴展性好但可能影響性能。 4.Redis/Memcached使用分佈式緩存提高性能和擴展性,但需額外配

Sessionhijacking是指攻擊者通過獲取用戶的sessionID來冒充用戶。防範方法包括:1)使用HTTPS加密通信;2)驗證sessionID的來源;3)使用安全的sessionID生成算法;4)定期更新sessionID。

本文比較了PHP和ASP.NET,重點是它們對大規模Web應用程序,性能差異和安全功能的適用性。兩者對於大型項目都是可行的,但是PHP是開源和無關的,而ASP.NET,


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

Dreamweaver CS6
視覺化網頁開發工具

WebStorm Mac版
好用的JavaScript開發工具

Atom編輯器mac版下載
最受歡迎的的開源編輯器

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中