Js 数组检测:从 php 数组中找到的值数(从数据库中抓取)

Js Array detect: number of values from php array found (grabbed from database)

本文关键字:数组 数据库 抓取 检测 php Js      更新时间:2023-09-26

这是(再次(关于数组(在我的谷歌地图项目中(。在被投票否决后,我终于成功地根据 Db data.
显示了多个标记。

我有两个PHP页面:

 1. inc.php
 2. index.php

In inc.php 包含 php 数组中的值,如下所示:

    //...... previous code
    $googlemap=$result['googlemap'];
    $map[] = $googlemap;
    } 
echo implode(', ' , $map);

结果显示:-5.364000343425874,-150.364000343425874-5.362878747789552,-150.3640003436345874(例如,此行包含 2 个值(

为了获取这些值,我使用本机 Ajax:

index 中.php包含 Javascript 代码来获取 php 数组 ( inc.php (,将它们提取到 latt 和 long 值的每个值中,如下所示:

  1. 来自 inc.php 的数组值被以下代码捕获:

var wwwsitus = document.querySelector("#valdata").value;

内部的值#valdata被原生 ajax 抓取:

<script>
function strQuery(str) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("valdata").value = xmlhttp.responseText;
            script_dkill()
            }
        }
    xmlhttp.open("POST", "inc.php?q="+str, true);
    xmlhttp.send(null);
    }
    //start: calling maps
    function script_dkill() {
    // --- some codes ---
    //..........
    //}
</script>
  1. 摘录#valdata

var n_result = wwwsitus.split(','); var x0 = n_result[0]; var y0 = n_result[1]; var x1 = n_result[2]; var y1 = n_result[3];

  1. 显示此格式数组中的地图:

var wwwsitus = [ ['<h4>Universitas Lampung</h4>', x0,y0], ['<h4>Universitas Lampung</h4>', x1,y1] ];

所有作品 100%.
问题是
从数据库中获取的值可以是 1、2 或更多。(在这里,我将值限制为 5(。

:如果#valdata包含 1 个或多个值,如何检测 #valdata 中的值,以便为结果创建if???.或者,您有其他建议来处理此问题。

我希望我的问题非常清楚,请帮助我摆脱困境。 呵呵

更新:
例如,我的期望是:

var wwwsitus = document.querySelector("#valdata").value;
var n_result = wwwsitus.split(','); 
    if (wwwsitus =null) {
       alert('No rent-house found near the place'); // if no value.
       // no action
        }
    else if (wwwsitus =1) {
        alert('Found 1 rent-houses'); // if found only 1 value
//continue to show the map based on the value - will show 1 marker.
        var x0 = n_result[0];
        var y0 = n_result[1];
        var wwwsitus = [['<h4>Kost 1</h4>', x0,y0]];
        }
    else if (wwwsitus =2) {
        alert('Found 2 rent-houses'); //if found 2 value
// continue to show the value - will show 2 markers.
        var x0 = n_result[0];
        var y0 = n_result[1];
        var x1 = n_result[2];
        var y1 = n_result[3];
        var wwwsitus = [['<h4>Kost 1</h4>', x0,y0],['<h4>Kost 2</h4>', x1,y1]];
    }   

但是,alert()不会像数据库中那样显示值的实际数量。我应该如何使用它编码。?

以下解决方案可能是愚蠢的编码。但它最终 1000% 有效。为了检测#valdata中的值数,我添加一个输入字段如下:

  1. <input type='hidden' id='numvalue' value=''/>
  2. 再次创建本机 Ajax 以获取有关新文件中值数量的信息(例如 num_inc.php (

在这里,使用该 ajax,我将能够根据 mysql 查询获取存在的值数量并发送到输入字段#numvalue

这是最后一个代码num_inc.php

$result = $uQuery->fetchColumn(); 
if($result> 0) {
    echo $result; // number of value detected!!!
    }

从过程中,我终于可以从#valdata中提取数据并成功显示地图。

以下是完整代码:

        <script>
            //document.getElementById("qfront").addEventListener("keydown", CalmDown, false);
            function script_grabbed(str) {
              var xmlhttp = new XMLHttpRequest();
              xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                  document.getElementById("numvalue").value = xmlhttp.responseText;
                  var datafound = document.getElementById("numvalue").value;
                    var xmlhttp2 = new XMLHttpRequest();
                    xmlhttp2.onreadystatechange = function() {
                      if (xmlhttp2.readyState == 4 && xmlhttp2.status == 200) {
                        document.getElementById("valdata").value = xmlhttp2.responseText;
                        var wwwsitus = document.getElementById("valdata").value;
                        var n_result = wwwsitus.split(',');
                            if (datafound == 1) {
                                var x0 = n_result[0];
                                var y0 = n_result[1];
                                var wwwsitus = [
                                    ['<h4></h4>', x0,y0]
                                    ];
                                }
                            else if (datafound == 2) {
                                var x0 = n_result[0];
                                var y0 = n_result[1];
                                var x1 = n_result[2];
                                var y1 = n_result[3];
                                var wwwsitus = [
                                    ['<h4></h4>', x0,y0],
                                    ['<h4></h4>', x1,y1]
                                    ];
                                }   
                            else if (datafound == 3) {
                                var x0 = n_result[0];
                                var y0 = n_result[1];
                                var x1 = n_result[2];
                                var y1 = n_result[3];
                                var x2 = n_result[4];
                                var y2 = n_result[5];
                                var wwwsitus = [
                                    ['<h4></h4>', x0,y0],
                                    ['<h4></h4>', x1,y1],
                                    ['<h4></h4>', x2,y2]
                                    ];
                                }   
                            else if (datafound == 4) {
                                var x0 = n_result[0];
                                var y0 = n_result[1];
                                var x1 = n_result[2];
                                var y1 = n_result[3];
                                var x2 = n_result[4];
                                var y2 = n_result[5];
                                var x3 = n_result[6];
                                var y3 = n_result[7];
                                var wwwsitus = [
                                    ['<h4></h4>', x0,y0],
                                    ['<h4></h4>', x1,y1],
                                    ['<h4></h4>', x2,y2],
                                    ['<h4></h4>', x3,y3]
                                    ];
                                }   
                            else if (datafound == 5) {
                                var x0 = n_result[0];
                                var y0 = n_result[1];
                                var x1 = n_result[2];
                                var y1 = n_result[3];
                                var x2 = n_result[4];
                                var y2 = n_result[5];
                                var x3 = n_result[6];
                                var y3 = n_result[7];
                                var x4 = n_result[8];
                                var y4 = n_result[9];
                                var wwwsitus = [
                                    ['<h4></h4>', x0,y0],
                                    ['<h4></h4>', x1,y1],
                                    ['<h4></h4>', x2,y2],
                                    ['<h4></h4>', x3,y3],
                                    ['<h4></h4>', x4,y4]
                                    ];
                                }   
                            else{
                                var no_kampus = document.querySelector("#qfront").value;
                                alert('Data Kost Sekitar Kampus ' + '"'+no_kampus+'"' + ' Belum Terdaftar!');
                                }       
                        // Setup the different icons and shadows
                        var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';
                        var icons = [
                          iconURLPrefix + 'red-dot.png',
                          iconURLPrefix + 'green-dot.png',
                          iconURLPrefix + 'blue-dot.png',
                          iconURLPrefix + 'orange-dot.png',
                          iconURLPrefix + 'purple-dot.png',
                          iconURLPrefix + 'pink-dot.png',      
                          iconURLPrefix + 'yellow-dot.png'
                        ]
                        var iconsLength = icons.length;
                        var map = new google.maps.Map(document.getElementById('map_canvas'), {
                          zoom: 10,
                          center: new google.maps.LatLng(-37.92, 151.25),
                          mapTypeId: google.maps.MapTypeId.ROADMAP,
                          mapTypeControl: true,
                          streetViewControl: true,
                          panControl: true,
                          zoomControlOptions: {
                             position: google.maps.ControlPosition.RIGHT_BOTTOM
                          }
                        });
                        var infowindow = new google.maps.InfoWindow({
                          maxWidth: 160
                        });
                        var markers = new Array();
                        var iconCounter = 0;
                        // Add the markers and infowindows to the map
                        for (var i = 0; i < wwwsitus.length; i++) {  
                          var marker = new google.maps.Marker({
                            position: new google.maps.LatLng(wwwsitus[i][1], wwwsitus[i][2]),
                            map: map,
                            animation: google.maps.Animation.DROP,
                            icon: icons[iconCounter]
                          });
                          markers.push(marker);
                          google.maps.event.addListener(marker, 'click', (function(marker, i) {
                            return function() {
                              infowindow.setContent(wwwsitus[i][0]);
                              infowindow.open(map, marker);
                            }
                          })(marker, i));
                          iconCounter++;
                          // We only have a limited number of possible icon colors, so we may have to restart the counter
                          if(iconCounter >= iconsLength) {
                            iconCounter = 0;
                          }
                        }
                        function autoCenter() {
                          //  Create a new viewpoint bound
                          var bounds = new google.maps.LatLngBounds();
                          //  Go through each...
                          for (var i = 0; i < markers.length; i++) {  
                                    bounds.extend(markers[i].position);
                          }
                          //  Fit these bounds to the map
                          map.fitBounds(bounds);
                        }
                        autoCenter();

                      }
                    }
                    xmlhttp2.open("POST", "inc.php?q=" + str, true);
                    xmlhttp2.send(null);
                }
              }
              xmlhttp.open("POST", "inc_num.php?q=" + str, true);
              xmlhttp.send(null);
            }
    </script>

输入字段:

<input id="qfront" name="qfront" placeholder="Type your campus ..." 
value="" type="text" onKeyPress="script_grabbed(this.value);"  />
<input id="valdata" name="valdata" type="hidden" value=""/>
<input id="numvalue" name="numvalue" type="hidden" value=""/>

num_inc.php:

$result = $uQuery->fetchColumn(); 
if($result> 0) {
    echo $result;
    }

in Inc.php:

    $googlemap=$result['googlemap'];
    $map[] = $googlemap;
    } 
echo implode(', ' , $map);

注意:如果您有其他不错的解决方案,请告诉我。当然,我喜欢比我尝试的更好的一个。
完整来源:Github