ajax post（没有Json）占用太多

Question

我有以下问题，希望有人能告诉我问题出在哪里..

我的表格有 3 个州、城市和社区的选择选项。最后 2 个选择取决于它的前一个值。 一切运行良好，但需要 2 秒才能显示新选项（更改之前的选择后）.. 我知道这里不需要 json（对吗？）.. 但是有没有办法减少响应时间？

function carga(tipo, valor, selector){
    $.ajax({
        type: 'post',
        url: "include/sel.php",
        data: { tipo: tipo, valor: valor },
        error: function() {
            $(selector).html('<option>Ha ocurrido un error</option>');
      },
        success: function (response) {
            $(selector).html(response);
        }
    })

}

编辑：我忘了..我正在使用 xampp

这是我的 sel.php

include('dbcs.php');

$i = $_POST['tipo'];
$valor = $_POST['valor'];

switch($i){
case 'provincia':
    $consulta_sql = 'Select * from tbl_zona_provincias';
    break;
case 'partido':
    $consulta_sql = 'Select idPartido, partido from tbl_zona_partidos Where codProvincia = "'.$_POST['valor'].'"';
    break;
case 'localidad':
    $consulta_sql = 'Select idLocalidad, localidad from tbl_zona_localidades Where idPartido = "'.$_POST['valor'].'"';
    break;
}


if(!$resultados = $db->query($consulta_sql)){
die('Se produjo un error al intentar enviar la consulta [' . $db->error . ']');
} else {

while($row = $resultados->fetch_array()){
    if($i == 'provincia'){
        $option = '<option value="'.$row['codProvincia'].'">'.$row['provincia'].'</option>';
    } else if($i == 'partido'){
        $option = '<option value="'.$row['idPartido'].'">'.$row['partido'].'</option>';
    } else {
        $option = '<option value="'.$row['idLocalidad'].'">'.$row['localidad'].'</option>';
    }
    echo $option;   
}
$resultados->free();
}
$db->close();

Answer 1

如果您在开始时将所有州、城市和社区存储在一个多维数组中，您将减少处理时间。 数组可以是这样的结构：

在 PHP 中

$selectOptions = array(
     state_id => array(
          country_id =>array(
               'name'=>country_name,
               'content'=>array(
                      neightborhood_id => neightborhood_name,
                 ),
             ),
           country_id...
        )
    ),
     state_id...
);

在你的页面中

<script ...>
    var selectOptions = <?php echo json_encode($selectOptions)?>;
</script>

然后，对于 state 列表，执行

$('#stateselector').on('change', function() {
    $('#countrySelector').empty();
    $(selectOptions[$(this).val()]).each(function(id, value) {
      $('#countrySelector').append($('<option />').attr('value', id).text(value.name));
    }
}

对于国家列表，请执行

$('#countryselector').on('change', function() {
    $('#neightborhoodSelector').empty();
    $(selectOptions[$(stateselector).val()][$(this).val()]).each(function(id, value) {
      $('#neightborhoodSelector').append($('<option />').attr('value', id).text(value));
    }
}