如何使用javascript在循环内进行ajax调用

Question

screenshot of error I am fetching all the value from location table and based on the particular location(eg. delhi) I want to show all the area(different area of delhi)of particular location using ajax call inside the loop.
This is index.php page

//ajax call for location
function cityArea(area) {
    if (city == " ") {
        document.getElementById("mapp").innerHTML = " ";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("mapp").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "city_area.php?q=" + area, true);
        xmlhttp.send();
    }
}



<div class="container-fluid">
    <div class="row">

        <div class="col-sm-9">
            <form name="" method="POST" enctype="multipart/form-data">

                <?php   
                   $sql="select * from location order by id desc";                      
                   $q=$conn->query($sql);
                   if($q->num_rows>0)
                   {
                       while($r1=$q->fetch_assoc())
                       {                                
                           echo '                           
                            <div class="col-sm-12">                      
                             <div class="col-sm-12">
                                  <p>city:</p>
                                    <p onload="cityArea('.$r1['city'].')">'.$r1['city'].'</p>
                                    <div id="mapp"></div>
                                </div>
                                 </div>                 
                             ';
                       }
                   }
                ?>
            </form>
        </div>
    </div>
</div>

This page is saved as city_area.php. Here Am trying to do ajax call through this page. But am not getting the value. Where am wrong pls correct me

<div id="mapp" name=" " class="form-control">
    <?php
        $city=$_GET['q'];
        $qry11 = "select area from location where `city`='$city'";
        $q11=$conn->query($qry11);
        if($q11->num_rows >0)
        {
           while($r11=$q11->fetch_assoc())
            {
             echo "
                 <label value='".$r11['area']."'>".$r11['area']."</label>
             ";  
            }
        }
    ?>
</div>

This is my database table

CREATE TABLE `location` (
  `id` int(11) PRIMARY KEY,
  `city` varchar(50) NOT NULL,
  `area` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


INSERT INTO `location` (`id`, `city`, `area`) VALUES
(1, 'delhi', 'mayur bihar'),
(2, 'delhi', 'sarita bihar');

Answer 1

The javascript function had an unknown variable city used in the logic test - I presume that was meant to be area

function cityArea( area ) {
    var mapp=document.getElementById("mapp");
    if ( area == " " ) {
        mapp.innerHTML = " ";
        return;
    } else {
        var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                mapp.innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "city_area.php?q=" + area, true);
        xmlhttp.send();
    }
}

There is no onload event for html elements - either assign to the body or as another type of event handler for the element - in this case I assumed this to be a click event to the paragraph. The call within to cityArea appears to have a mismatch of quotes - presumably the parameter being passed in is a string so it needs to be quoted.

<div class="container-fluid">
    <div class="row">

        <div class="col-sm-9">
            <form name="" method="POST" enctype="multipart/form-data">

                <?php

                   $sql="select * from location order by id desc";                      
                   $q=$conn->query($sql);

                    if( $q->num_rows>0 ){
                        while($r1=$q->fetch_assoc()){

                            echo '                           
                            <div class="col-sm-12">
                                <div class="col-sm-12">
                                    <p>city:</p><!-- changed quotes - escaped single quotes ( not tested ) -->
                                    <p onclick="cityArea( \''.$r1['city'].'\' )">'.$r1['city'].'</p>
                                </div>
                            </div>';
                       }
                    }

                ?>
                <div id="mapp"></div>
            </form>
        </div>
    </div>
</div>

The ajax call was attempting to return a div with an ID that already exists in the DOM so would render that invalid and would make targeting of elements useless due to the ambiguity of IDs.

<?php

    $city=!empty( $_GET['q'] ) ? $_GET['q'] : false;
    if( $city ){

        $qry11 = "select area from location where `city`='$city'";
        $q11=$conn->query( $qry11 );

        if( $q11 && $q11->num_rows > 0 ) {
           while( $r11=$q11->fetch_assoc() ){
             echo "<label value='".$r11['area']."'>".$r11['area']."</label>";  
            }
        }
    }
?>