Javascript 使用Ajax和PHP从数据库获取数据，并将结果作为下拉列表返回

我知道我想要什么，但在如何完成这件事上需要帮助。第一个下拉列表是从数据库中获取的，它可以正常工作。在第一个下拉列表的更改事件中，系统应该转到数据库，并将结果提取到下一个下拉列表中。请参阅我迄今为止所做的帮助： JQUERY部分

<script type="text/javascript" src="includes/scripts/newJquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#locate").change(function(){
       var selectedloc = $("#locate option:selected").val();
       $.ajax({type: "POST",url:"process-loc.php",data:{loca:selectedloc}}).done(function(data){
            var ans=jQuery.parse(data);
           //using php-mysql before
           var ps = ans.res;
           $("#subloc").html(ps);

       });
    });
    });
    </script>

前端HTML

 <tr>
    <th>Primary Location:</th>
    <?php 
   $result = mysqli_query($connection,"SELECT * FROM tab_location");?>
    <td>
    <select name="locate" class="form-control" id="locate">
    <option>Select Main Location</option>
    <?php while($rw = mysqli_fetch_array($result)){ ?>
    <option value="<?php echo $rw['location_name'];?>"><?php echo $rw['location_name'];?></option>
      <?php };?>
    </select>
    </td>
  </tr>
   <tr>
    <th>Sub Location:</th>
    <td id="subloc"></td>
  </tr>

Process-loc.php

if(isset($_POST["loca"])){
        include 'includes/session.php';
        include 'includes/db_connection.php';
        include 'includes/functions.php';


        $main = $_POST["loca"];


         $gets = "SELECT * FROM tab_fltlocation WHERE mainloc='".$main."'";
         $get = mysqli_query($connection,$gets);
         $gt = mysqli_fetch_array($get);


         //$nos= $gt['opsNo'];


          if(mysqli_num_rows($get)>=0)
          {
          echo json_encode(array("res"=>$gt));//or do a dropdown using <select name='subloc'><option value=$gt['loc']>$gt['loc']</option></select>
          }else{
          echo json_encode(array("res"=>"0"));
          }

       }
         ?>

以下是我希望在前端页面上显示的内容： $gt['loc']

---

如何实现这一点。

您可以通过更改AJAX处理器来实现：

Process-loc.php

if(isset($_POST["loca"])){
        include 'includes/session.php';
        include 'includes/db_connection.php';
        include 'includes/functions.php';


        $main = $_POST["loca"];


         $gets = "SELECT * FROM tab_fltlocation WHERE mainloc='".$main."'";
         $get = mysqli_query($connection,$gets);
         $gt = mysqli_fetch_array($get);


         //$nos= $gt['opsNo'];


          if(mysqli_num_rows($get)>=0)
          {
          echo json_encode(array("res"=>$gt));//or do a dropdown using <select name='subloc'><option value=$gt['loc']>$gt['loc']</option></select>
          }else{
          echo json_encode(array("res"=>"0"));
          }

       }
         ?>

从PHP返回的数据将是HTML格式的，除非您使用dataType:来更改它，这样您就可以在PHP端构建HTML，然后将其放到subloc表单元格中

$query   = "
                SELECT 
                    tariff_name
                FROM tariff_setting";
        $result = mysqli_query($this->_connection, $query);

       while ($row = mysqli_fetch_assoc($result)) 
            $response[] = $row['tariff_name'];
       }

$tarrifList = json_encode($response);

//$tarrifList是响应，以json编码格式发送，并在ajax成功时解码

//Javascript进程

 var obj = JSON.parse(resdata);
    var areaOption = "<option value=''>Select State</option>";
     for (var i = 0; i < obj.length; i++) {
         areaOption += '<option value="' + obj[i] + '">' + obj[i] + '</option>'
     }
     $("#patientSelectState").html(areaOption);

---

在第一个框中调用包含ajax的函数，该函数将从数据库中检索信息。这个ajax调用将根据第一个输入获取数据。 现在查询您的数据库并在foreach循环中回显结果，您只能在那里创建标记。 在ajax“success:”中，捕获数据并显示它

//from the database
foreach ($info as $product) 
{
echo "<option value=".$product['childsticker_id'].">".$product['name']</option>";
}

      //ajax call page
      success: function(result) 
      {
        $("#states").html(result);
      }

---

$tarrifList作为ajax调用的响应发送如果它不工作，请将var ps=ans.res的响应发送给我；ajax响应中的console.logps。它可以工作，我只是需要更改它以满足我的需求，但是您的响应是100%ok。

//from the database
foreach ($info as $product) 
{
echo "<option value=".$product['childsticker_id'].">".$product['name']</option>";
}

      //ajax call page
      success: function(result) 
      {
        $("#states").html(result);
      }