Question

我创建了2个下拉列表，其中第二个是根据使用Ajax在第一个中选择的选项从数据库填充的。

它工作正常，但我想将我的ajax中的调用从url:"get-City.php"更改为同一页面而不是创建get-city.php我想将所有代码放在一个页面中。< / p>

这是我的index.php

<?php
include('connection.php'); 
?>
<!DOCTYPE html>
<html>
 <head>
  <title>demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
 <body>
<div class="">
    <label>Country :</label>
    <select name="country" id="country">
      <option value=''>------- Select --------</option>
      <?php 
$query = 'SELECT DISTINCT Country FROM ****'; 
foreach ($dbDB->query($query) as $row) {
echo '<option value="'.$row["Country"].'">'.$row["Country"].'</option>';
} 
      ?>
    </select>

    <label>City :</label>
    <select name="city" id="city"><option>------- Select --------</option></select>
  </div>
   </body>
</html>

<script>
$(document).ready(function() {
  $("#country").change(function() {
    var country_name = $(this).val();
    if(country_name != "") {
      $.ajax({
        url:"get-City.php",
        data:{selected_country:country_name},
        type:'POST',
        success:function(response) {
          var resp = $.trim(response);
          $("#city").html(resp);
        }
      });
    } else {
      $("#city").html("<option value=''>------- Select --------</option>");
    }
  });
});
</script>

和City.php

<?php
include('connection.php'); 

        if(isset($_POST['selected_country'])) {
        $sql = "SELECT DISTINCT City FROM **** WHERE Country = '".$_POST['selected_country']."'ORDER BY City";
        $res = $dbDB->prepare($sql);
        $res->execute();
        $count = count($res->fetchAll());

          if($count > 0) {
            echo "<option value=''>------- Select --------</option>";
        foreach ($dbDB->query($sql) as $row) {
        echo '<option value="'.$row["City"].'">'.$row["City"].'</option>'; } 
        }  } 
        else { header('location: ./'); }
?>

现在我想在同一页面上合并这两个文件，并在同一页面上进行AJAX调用。这是我的更新文件

<?php
include('connection.php');

if(isset($_POST['selected_country'])) {
$sql = "SELECT DISTINCT City FROM **** WHERE Country = '".$_POST['selected_country']."'ORDER BY City";
$res = $dbDB->prepare($sql);
$res->execute();
$count = count($res->fetchAll());

  if($count > 0) {
    echo "<option value=''>------- Select --------</option>";
foreach ($dbDB->query($sql) as $row) {
echo '<option value="'.$row["City"].'">'.$row["City"].'</option>'; } 
}  } 
else { header('location: ./'); }
?>

<!DOCTYPE html>
<html>
 <head>
  <title>demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
 <body>
<div class="">
    <label>Country :</label>
    <select name="country" id="country">
      <option value=''>------- Select --------</option>
      <?php 
include('connection.php');
$query = 'SELECT DISTINCT Country FROM **** ORDER BY Country ASC';
foreach ($dbDB->query($query) as $row) {
echo '<option value="'.$row["Country"].'">'.$row["Country"].'</option>';
} 
      ?>
    </select>

    <label>City :</label>
    <select name="city" id="city"><option>------- Select --------</option></select>
  </div>
   </body>
</html>

<script>
$(document).ready(function() {
  $("#country").change(function() {
    var country_name = $(this).val();
    if(country_name != "") {
      $.ajax({
        data:{selected_country:country_name},
        type:'POST',
        success:function(response) {
          var resp = $.trim(response);
          $("#city").html(resp);
        }
      });
    } else {
      $("#city").html("<option value=''>------- Select --------</option>");
    }
  });
});
</script>

每次我选择一个国家/地区，然后第二个下拉列表为空。你能告诉我我错过了什么吗？谢谢。

如何将AJAX调用从另一个php文件更改为同一页面

0 个答案: