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

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

php jquery ajax

如何将AJAX调用从另一个php文件更改为同一页面,php,jquery,ajax,Php,Jquery,Ajax,我创建了两个下拉列表，其中第二个列表是根据第一个列表中使用Ajax选择的选项从数据库填充的它工作正常，但我想将ajax中的调用从url:get-City.php更改为同一页面，而不是创建get-City.php。我想将所有代码放在一个页面中这是我的index.php <?php include('connection.php'); ?> <!DOCTYPE html> <html> <head> <title>demo<

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

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

这是我的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请求中删除了url！为什么不将所有php代码放在一个函数中，然后调用该函数。可能缺少ajax.js？@AliSheikhpour因为ajax调用在同一个页面上，我可以删除代码中的urladd echo测试，并检查XHR是否返回测试？