JS数组检测：从发现PHP数组值的数量（从数据库抢下） [英] Js Array detect: number of values from php array found (grabbed from database)
问题描述
这是（再次）有关数组（在我的谷歌地图的项目）。是voteddown后，最后我成功了基于DB数据显示多个标记。
我有两个PHP页面：
1 inc.php
2，index.php文件
在 inc.php 包含值的 PHP数组的，如下：
// ...... previous code
$的GoogleMap = $结果[GoogleMap的'];
$图[] = $ GoogleMap的;
}
回声破灭（，，$地图）;
结果显示： -5.364000343425874，-150.364000343425874-5.362878747789552，-150.3640003436345874 （此行包含例如2个值）
要获取值，我使用本机的Ajax：
在的index.php 包含的JavaScript codeS来获取PHP阵列（ inc.php ）的提取物它们转化为LATT和长值的每个值，如下：
- 数组值由该code抓：
从inc.php
VAR wwwsitus = document.querySelector（＃valdata）值;
在 #valdata 的值由本地阿贾克斯抓起：
＆LT;脚本＆GT;
功能strQuery（STR）{
VAR XMLHTTP =新XMLHtt prequest（）;
xmlhttp.onreadystatechange =功能（）{
如果（xmlhttp.readyState == 4和＆放大器; xmlhttp.status == 200）{
。的document.getElementById（valdata）值= xmlhttp.responseText;
script_dkill（）
}
}
xmlhttp.open（POST，？inc.php Q =+ STR，真正的）;
xmlhttp.send（NULL）;
}
//启动：调用地图
功能script_dkill（）{
// ---约$ C $ --- CS
// ..........
//}
＆LT; / SCRIPT＆GT;
<醇开始=2>
#valdata ： VAR n_result = wwwsitus.split（''）;
变种X0 = n_result [0];
变种Y0 = n_result [1];
变种X1 = n_result [2];
VAR Y1 = n_result [3];
VAR wwwsitus = [
['＆LT; H4＆GT;楠榜高教在线下和/ H4＆GT;'，X0，Y0]
['＆LT; H4＆GT;楠榜高教在线下和/ H4＆GT;'，X1，Y1]
];
所有工作100％。
的问题是：
从数据库抓起值可以是1,2或更多。 （在这里，我限制值到5）。
问：
我如何检测 #valdata 的值，如果 #valdata 包含1个或多个值，这样我可以创建如果的结果???。或者，您有其他建议，以处理这个问题。
我希望我的问题很清楚，请帮我从这。 Thnks。
更新：
我想到的是，例如：
VAR wwwsitus = document.querySelector（＃valdata）值;
变种n_result = wwwsitus.split（，）;
如果（wwwsitus = NULL）{
警报（不近的地方找到租的房子'）; //如果没有价值。
//无动作
}
否则如果（wwwsitus = 1）{
警报（'找到1租的房子'）; //如果发现只有1值
//继续显示基于价值的地图 - 将显示1标记。
变种X0 = n_result [0];
变种Y0 = n_result [1];
变种wwwsitus = [['＆所述; H4＆GT;科斯特1所述; / H4＆GT;'，X0，Y0]];
}
否则如果（wwwsitus = 2）{
警报（'找到2租的房子'）; //如果找到2值
//继续显示值 - 将显示2个标记。
变种X0 = n_result [0];
变种Y0 = n_result [1];
变种X1 = n_result [2];
变种Y1 = n_result [3];
变种wwwsitus = [['＆所述; H4＆GT;科斯特1所述; / H4＆GT;'，X0，Y0]，['＆所述; H4＆GT;科斯特2'; / H4＆GT;'，X1，Y1]];
}
但是，警报（）没有显示的值的实数在数据库中。我应该如何code这个？
这以下解决方案可能是愚蠢的编码。但它最终的作品1000％。
要检测里面的 #valdata 值的数量，我加一个输入字段如下：
-
＆LT;输入类型=隐藏ID ='numvalue价值=''/＆GT; - 再次创建本地阿贾克斯抢下有关新文件中值的数目的信息（例如
num_inc.php）
下面，与阿贾克斯，我将能够得到值的数量存在基于MySQL查询并发送至输入字段 #numvalue 。
下面是 num_inc.php 最后code：
$结果= $ uQuery-＆GT; fetchColumn（）;
如果（$结果大于0）{
回声$结果; //检测值数！
}
从这个过程中，我终于可以提取 #valdata 的数据，并成功地显示地图。
下面是完整的code：
＆LT;脚本＆GT;
//document.getElementById(\"qfront\").addEventListener(\"keydown，CalmDown，FALSE）;
功能script_grabbed（STR）{
VAR XMLHTTP =新XMLHtt prequest（）;
xmlhttp.onreadystatechange =功能（）{
如果（xmlhttp.readyState == 4和＆放大器; xmlhttp.status == 200）{
。的document.getElementById（numvalue）值= xmlhttp.responseText;
VAR datafound =的document.getElementById（numvalue）值。
VAR xmlhttp2 =新XMLHtt prequest（）;
xmlhttp2.onreadystatechange =功能（）{
如果（xmlhttp2.readyState == 4和＆放大器; xmlhttp2.status == 200）{
。的document.getElementById（valdata）值= xmlhttp2.responseText;
。VAR wwwsitus =的document.getElementById（valdata）值;
变种n_result = wwwsitus.split（，）;
如果（datafound == 1）{
变种X0 = n_result [0];
变种Y0 = n_result [1];
VAR wwwsitus = [
['＆LT; H4＆GT;＆LT; / H4＆GT;'，X0，Y0]
];
}
否则如果（datafound == 2）{
变种X0 = n_result [0];
变种Y0 = n_result [1];
变种X1 = n_result [2];
变种Y1 = n_result [3];
VAR wwwsitus = [
['＆LT; H4＆GT;＆LT; / H4＆GT;'，X0，Y0]
['＆LT; H4＆GT;＆LT; / H4＆GT;'，X1，Y1]
];
}
否则如果（datafound == 3）{
变种X0 = n_result [0];
变种Y0 = n_result [1];
变种X1 = n_result [2];
变种Y1 = n_result [3];
变种χ2= n_result [4];
变种Y2 = n_result [5];
VAR wwwsitus = [
['＆LT; H4＆GT;＆LT; / H4＆GT;'，X0，Y0]
['＆LT; H4＆GT;＆LT; / H4＆GT;'，X1，Y1]
['＆所述; H4＆GT;＆下; / H4＆GT;'，X2，Y2]
];
}
否则，如果（datafound == 4）{
变种X0 = n_result [0];
变种Y0 = n_result [1];
变种X1 = n_result [2];
变种Y1 = n_result [3];
变种χ2= n_result [4];
变种Y2 = n_result [5];
变种X3 = n_result [6];
变种Y3 = n_result [7];
VAR wwwsitus = [
['＆LT; H4＆GT;＆LT; / H4＆GT;'，X0，Y0]
['＆LT; H4＆GT;＆LT; / H4＆GT;'，X1，Y1]
['＆所述; H4＆GT;＆下; / H4＆GT;'，X2，Y2]
['＆所述; H4＆GT;＆下; / H4＆GT;'，X3，Y3]
];
}
否则，如果（datafound == 5）{
变种X0 = n_result [0];
变种Y0 = n_result [1];
变种X1 = n_result [2];
变种Y1 = n_result [3];
变种χ2= n_result [4];
变种Y2 = n_result [5];
变种X3 = n_result [6];
变种Y3 = n_result [7];
变种X4 = n_result; [8]
变种Y4 = n_result [9];
VAR wwwsitus = [
['＆LT; H4＆GT;＆LT; / H4＆GT;'，X0，Y0]
['＆LT; H4＆GT;＆LT; / H4＆GT;'，X1，Y1]
['＆所述; H4＆GT;＆下; / H4＆GT;'，X2，Y2]
['＆所述; H4＆GT;＆下; / H4＆GT;'，X3，Y3]
['＆所述; H4＆GT;＆下; / H4＆GT;'，X4，Y4]
];
}
其他{
VAR no_kampus = document.querySelector（＃QFRONT）值。
警报（数据考斯特Sekitar堪布'+''+ no_kampus +''+'贝尔姆Terdaftar！'）;
}
//设置不同的图标和阴影
VAR iconURL preFIX ='http://maps.google.com/mapfiles/ms/icons/'; VAR图标= [
iconURL preFIX +'红dot.png'，
iconURL preFIX +'绿色dot.png'，
iconURL preFIX +'蓝dot.png'，
iconURL preFIX +'橙dot.png'，
iconURL preFIX +'紫dot.png'，
iconURL preFIX +粉红dot.png'，
iconURL preFIX +'黄dot.png
]
VAR iconsLength = icons.length; VAR地图=新google.maps.Map（的document.getElementById（'map_canvas提供'）{
变焦：10，
中心：新google.maps.LatLng（-37.92，151.25），
mapTypeId设为：google.maps.MapTypeId.ROADMAP，
MapTypeControl中：真实，
将streetViewControl：真实，
panControl：真实，
ZoomControlOptions来：{
位置：google.maps.ControlPosition.RIGHT_BOTTOM
}
}）; VAR信息窗口=新google.maps.InfoWindow（{
了maxWidth：160
}）; VAR指标=新的Array（）; 变种iconCounter = 0; //标记和信息窗口添加到地图
对于（VAR I = 0; I＆LT; wwwsitus.length;我++）{
VAR的标记=新google.maps.Marker（{
位置：新google.maps.LatLng（wwwsitus [I] [1]，wwwsitus [I] [2]），
地图：地图，
动画：google.maps.Animation.DROP，
图标：图标[iconCounter]
}）; markers.push（标记）; google.maps.event.addListener（标记，'点击'，（功能（标记，I）{
返回功能（）{
infowindow.setContent（wwwsitus [I] [0]）;
infowindow.open（地图，标记）;
}
}）（标记，I））; iconCounter ++;
//我们只有可能的图标颜色的数量有限，所以我们可能需要重新启动计数器
如果（iconCounter＆GT; = iconsLength）{
iconCounter = 0;
}
} 功能自动居中（）{
//创建一个新的观点界
VAR边界=新的google.maps.LatLngBounds（）;
//通过每个去...
对于（VAR I = 0; I＆LT; markers.length;我++）{
bounds.extend（标记[I] .POSITION）;
}
//符合这些边界的地图
map.fitBounds（边界）;
}
自动居中（）;
}
}
xmlhttp2.open（POST，？inc.php Q =+ STR，真正的）;
xmlhttp2.send（NULL）;
}
}
xmlhttp.open（POST，？inc_num.php Q =+ STR，真正的）;
xmlhttp.send（NULL）;
}
＆LT; / SCRIPT＆GT;
输入字段：
＆LT;输入ID =QFRONTNAME =QFRONT占位符=输入你的校园......
值=类型=文本安其preSS =script_grabbed（THIS.VALUE）; /＆GT;
＆LT;输入ID =valdataNAME =valdata类型=隐藏值=/＆GT;
＆LT;输入ID =numvalueNAME =numvalue类型=隐藏值=/＆GT;
在 num_inc.php：
$结果= $ uQuery-＆GT; fetchColumn（）;
如果（$结果大于0）{
回声$结果;
}
在 inc.php：
$的GoogleMap = $结果[GoogleMap的'];
$图[] = $ GoogleMap的;
}
回声破灭（，，$地图）;
注意：如果您有另一种很好的解决方案，请让我知道。当然，我想最好的一个，比我的尝试。
完整的资料来源： Github上
This is (again) about array (in my Google map project). After being voteddown, finally I succeed to show multiple markers based on Db data.
I have two PHP pages:
1. inc.php
2. index.php
In inc.php contains values in php array, as follow:
//...... previous code
$googlemap=$result['googlemap'];
$map[] = $googlemap;
}
echo implode(', ' , $map);
The result shows: -5.364000343425874,-150.364000343425874-5.362878747789552,-150.3640003436345874 (this line contains 2 values for example)
To get the values, I use native Ajax:
In index.php contains Javascript codes to fetch the php array (inc.php), extract them into each values for latt and long value, as follow:
- Array Values from inc.php is caught by this code:
var wwwsitus = document.querySelector("#valdata").value;
The value inside #valdata grabbed by native 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>
- Extract
#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];
- Show the map from this format array:
var wwwsitus = [
['<h4>Universitas Lampung</h4>', x0,y0],
['<h4>Universitas Lampung</h4>', x1,y1]
];
All works 100%.
The problem is:
Values grabbed from database can be 1, 2 or more. (here, I limit the values into 5).
Question:
How do I detect the values in #valdata if #valdata contains 1 or more values so that I can create if for the result???. or, you have other suggestion to handle this.
I hope my question is very clear and pls help me out from this. Thnks.
UPDATED:
What I expect is, for instance:
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]];
}
HOWEVER, the alert() NOT SHOWING the real number of the values as in the Database. How should I code with this.?
This following solution perhaps stupid coding. But it finally works 1000%.
To detect number of values inside #valdata, I add one input field as follow:
<input type='hidden' id='numvalue' value=''/>- Create native Ajax again to grabbed the information about number of values in new file (e.g.
num_inc.php)
Here, with that ajax, I will be able to get number of values exist based on mysql query and send to input field #numvalue.
Here's in num_inc.php last code:
$result = $uQuery->fetchColumn();
if($result> 0) {
echo $result; // number of value detected!!!
}
From the process, I finally can extract the data from #valdata and display the map successfully.
Here's the full code:
<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 Field:
<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=""/>
in num_inc.php:
$result = $uQuery->fetchColumn();
if($result> 0) {
echo $result;
}
in inc.php:
$googlemap=$result['googlemap'];
$map[] = $googlemap;
}
echo implode(', ' , $map);
NOTE: If you have another nice solution, please let me know. Of course, I like the better one than I attempt.
Complete Source: Github
这篇关于JS数组检测：从发现PHP数组值的数量（从数据库抢下）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
