PHP中echo語句濫用詳解

2020-03-22 18:42:34

字體：大中小

來源：轉載

供稿：網友

首先簡要介紹一下我的程序的結構以及要實現的功能：簡而言之，該程序主要功能是實現將已知地址經緯度的某個點在地圖上在地圖上顯示出來，程序主要分為三個模塊：分別是前端（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 :……(谷歌chrome)等錯誤。

經驗教訓：當后臺通過json格式輸出數據以供前臺get時，切記，除了echo輸出有用數據時,不可用echo輸出其他一切無用數據，否則會造成前臺數據接收格式出錯。

以上為本人做項目過程中的一點小經驗，如有謬誤，請批評指正！、