使用Php，mySql，ajax，（xmlhttp）和JS，如何创建一个php多维将它发送给JS并使用它？

Question

I looked a lot on the internet and wasn't able to find the answer i need, so here i come to you. What i have : A database which look like this :

name  latitude  longitude
---- --------- ----------
foo    13.323   -51.356
foo    54.698   2.487

What i want to do : I need to retrieve the latitude and longitude from a mysqli request done with php and use it in a function that i defined.

My problem : I'm trying to use xmlrequest but it apparently doesn't work.

The code : JS :

var selI = document.getElementById("nameIti");    
selI.onchange = function(){
                var val = this[this.selectedIndex].getAttribute("value");
                showMark(val);
            }
function showMark(str){
            var xhr;
            if(str==""){
                return;
            }
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();
            }
            else{
                xhr=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4 && xhr.status ==200){
                    var object = JSON.parse(xhr.responseText);
                    for(var a in object){
                    newMark(v['lat'], v['lng']);
                    document.getElementById("pi").innerHTML=JSON.parse(xrh.responseText); // This is a test to display any kind of result.
                    }                       
                }
            }
            xhr.open("GET", "getpos.php?q="+str, true);
            xhr.send();
        }   

PHP :

<?php
$nom = $_GET['q'];

include("connexion.php");
$con = connect_LIF4();
$req1= "SELECT Latitude, Longitude FROM etape LEFT JOIN itineraires ON NomLieu=nomEtape WHERE nomIti LIKE '%$nom%'";
$result1 = mysqli_query($con, $req1);

$data = array();
while($row = mysqli_fetch_array($result1){
    $data['lat'] = $row['Latitude'];
    $data['lng'] = $row['Longitude'];
    $resp[] = $data;
}
echo json_encode($resp);
mysqli_close($con);
?>

I tried to use newMark(lat, lng)(Which i coded and works fine) with random values, in showMark outside the onreadystatechange and it works, but i need to use it with the values retrieved from the php.

Answer 1

One problem with your PHP is that

while($row = mysqli_fetch_array($result1){

is missing the second brace. It should be:

while($row = mysqli_fetch_array($result1)){

Also the URL in the ajax request should be the full URL, not just getpos.php

Thirdly you have written xrh.responseText (should be xhr).

Basically there's loads of syntax errors in your code - you should use the javascript console to debug the front end ones, and PHP logging or error display for the back end ones. You should only need help here once you've debugged all obvious syntax errors.

EDIT - below is a working example (although I haven't done the MySQL part)

JS + HTML:

<span id='pi'></span>
<select id='nameIti'>
    <option value='foo'>foo</option>
    <option value='bar'>bar</option>
</select>

<script>

function newMark(lat,lng) {
    console.log(lat);
    console.log(lng);
}

var selI = document.getElementById("nameIti");
selI.onchange = function(){
                var val = this[this.selectedIndex].getAttribute("value");
                showMark(val);
            }

function showMark(val){

    var str=val;
    var xhr;
    // if(str==""){
    //     return;
    // }
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }
    else{
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4 && xhr.status ==200){
            var result = JSON.parse(xhr.responseText);
            console.log(result);
            for(var a in result){
                newMark(result[a]['lat'], result[a]['lng']);
                document.getElementById("pi").innerHTML = result[a]['lat'] + ', ' + result[a]['lng'];
            }
        }
    }
    // xhr.open("GET", "getpos.php?q="+str, true);
    xhr.open("GET", "getpos.php?q="+str, true);
    xhr.send();
}
</script>

PHP:

<?php
$nom = $_GET['q'];

$data = array();
if($nom == 'foo') {
  $data['lat'] = '5.12';
  $data['lng'] = '0.34';
  $resp[] = $data;
}
else if($nom == 'bar') {
  $data['lat'] = '2.34';
  $data['lng'] = '1.34';
  $resp[] = $data;
}
echo json_encode($resp);
?>