Ajax 成功返回已注释的 Html 标记

Question

我正在尝试设置一个选择框，该框将根据先前选择的州显示城市。

基本上，我使用 ajax 运行我的 php.file 来填充我的<option>。在php文件中我成功通过了预选状态查询数据库。但是，现在，为了填充<option>，我使用ajax 成功调用php 文件，但是，每当我尝试传递包含php 代码的变量时，它就会显示为!-- 和-- 的注释。

//  hmtl

<select id="select-city" required >
<option disabled selected>Selecione sua Cidade</option>
</select>

// js code

function fillSelectCity () {

    var getState = document.getElementById('selectState');
    var stateID = getState.options[getState.selectedIndex].value;

    $.ajax ({
    type: "POST", 
    url: "fillcity.php",
    data: { stateID : stateID },
    success:  function (){

        var phpfile = "'fillcity.php'"
        var tag = "<?php include_once " + phpfile + " ?>";
        $('#select-city').html(tag);
/// here the output is "<!-- ?php include_once 'fillcity.php' ? -->"
    }    
    })

 }

//php file

<?php 

$conn = mysqli_connect("host", "user", "pass", "db");

if(isset($_POST['stateID']))
{
    $stateID = $_POST['stateID'];
}

$query = "SELECT * FROM states WHERE stateID = '$stateID'"; 
$result_one = mysqli_query($conn, $query);
$row = mysqli_fetch_assoc($result_one); //my table has a specific ID for each state, so I am fetching the acronoym of the state according to the id;
$stateUf = $row['uf']; // passing the acronym to the $stateUf
mysqli_free_result($result_one);

$queryCity = "SELECT * FROM city WHERE Uf = '$stateUf'"; //query all cities with the acronym

if ($result = mysqli_query($conn, $queryCity)){
    while ($row = mysqli_fetch_assoc($result)){
        $id = $row['cityID'];
        $name =  $row['cityName'];
        $name = utf8_encode($name);
        echo <<< EOT
        "<option value="$id">$name</option>"
EOT;
    }

    mysqli_free_result($result);}

    else {echo "<option>Error</option>";}


?> 

我希望通过循环遍历 php 文件中的表 city 来填充我的选择选项。标签<?php include_once 'fillcity.php' ?> 用于填充状态选择。可能有一种更直接的方式来进行相应的填充，但由于我是编程新手，我正试图自己解决问题。但是，请随意推荐其他方法，因为我不确定我打算做的事情是否会奏效。谢谢！

Answer 1

你可以试试这个。您可以稍后对其进行修改以进行改进。

read.php

<?php
    //include header
    header('Content-Type: application/json');
$conn= mysqli_connect("localhost","my_user","my_password","my_db");
if (mysqli_connect_errno()){
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$type = $_GET["type"];
if($type == "GetState"){
    //SAMPLE QUERY
    $sql = "SELECT StateID,StateName from State";
    $data = array();
    $results = $db -> query($sql);
    while($row = mysqli_fetch_assoc($results)){
        $data[] = $row;
    }
    echo json_encode($data);
}
if($type == "GetCity"){
    $StateID= $_POST["StateID"];
    //SAMPLE QUERY
    //LET'S ASSUME THAT YOU HAVE FOREIGN KEY
    $sql = "SELECT CityID,CityName from City where StateID = '".$StateID."'";
    $data = array();
    $results = $db -> query($sql);
    while($row = mysqli_fetch_assoc($results)){
        $data[] = $row;
    }
    echo json_encode($data);
}
?>

index.html

<select id="state"></select>
<select id="city"></select>

<!--PLEASE INCLUDE JQUERY RIGHT HERE E.G. <script src='jquery.min.js'></script>--> 
<!--DOWNLOAD JQUERY HERE https://jquery.com/-->
<script>
    LoadState();
    function LoadState(){
        $.ajax({
            url:"read.php?type=GetState",
            type:"GET",
            success:function(data){
                var options = "<option selected disabled value="">Select 
State</option>";
            for(var i in data){
                options += "<option value='"+data[i].StateID+"'>" + data[i].StateName+ "</option>";
            }
            $("#state").html(options);
        }
    });
}
function LoadCity(StateID){
    $.ajax({
        url:"read.php?type=GetCity",
        type:"POST",
        data:{
            StateID: StateID
        },
        success:function(data){
            var options = "<option selected disabled value="">Select City</option>";
            for(var i in data){
                options += "<option value='"+data[i].CityID+"'>" + data[i].CityName+ "</option>";
            }
            $("#city").html(options);
        }
    });
}
$("#city").change(function(){
    LoadCity(this.value);
});

Answer 2

您不需要include 'fillcity.php。 AJAX 调用运行该脚本，响应是输出。它将在成功函数的参数中。

function fillSelectCity () {

    var getState = $("#selectState").val();

    $.ajax ({
        type: "POST", 
        url: "fillcity.php",
        data: { stateID : stateID },
        success:  function (tag){
            $('#select-city').html(tag);
        }    
    });

 }