javascript - Js数组检测: number of values from php array found (grabbed from database)

Question

这(又)是关于数组的(在我的谷歌地图项目中)。被否决后，终于成功显示了基于Db数据的多个标记。

我有两个 PHP 页面:

 1. inc.php
 2. index.php

在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 中包含获取 php 数组 ( inc.php ) 的 Javascript 代码，提取它们到 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. 显示此格式数组中的 map :

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

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

问题:
如何检测 #valdata 中的值如果#valdata包含 1 个或多个值，以便我可以创建 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()不显示数据库中值的真实数量。我应该如何编码呢？

Answer 1

下面的解决方案可能是愚蠢的编码。但它最终可以 1000% 工作。
检测 #valdata 中值的数量，我添加一个输入字段如下:

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

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

这里是num_inc.php最后代码:

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

从这个过程中，我终于可以从#valdata中提取数据了。并成功显示 map 。

完整代码如下:

        <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;
    }

在 inc.php 中:

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

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