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

Question

screenshot of error我从位置表中获取所有值并基于特定位置（例如德里）我想在循环内使用ajax调用显示特定位置的所有区域（德里的不同区域）。 这是index.php页面

//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>

此页面保存为city_area.php。这里我试图通过这个页面进行ajax调用。但我没有得到价值。哪里错了请纠正我

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

这是我的数据库表

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

javascript函数有一个未知的变量city在逻辑测试中使用 - 我认为这是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();
    }
}

html元素没有onload事件 - 分配给正文或作为元素的另一种类型的事件处理程序 - 在这种情况下，我认为这是段落的click事件。 cityArea内部的调用似乎与引号不匹配 - 可能是传入的参数是一个字符串，因此需要引用它。

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

ajax调用试图返回一个具有已存在于DOM中的ID的div，因此会使该无效并且由于ID的模糊性而使元素的目标无效。

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