Question

这是我的site。这个想法是当你从dd中选择一个国家时，通过on change事件，它使用AJAX调用一个函数，执行一个查询并返回一个json。我正在使用Codeigniter框架。所以我的问题是如何通过选择一个国家来改进这些代码以减少城市的加载时间？是的，我知道我有点顽固，我不想使用县：）

这里是视图中的html代码：

<div class="select_zones">
Country:
<select name="country" id = 'country' style="width:220px;">
<option value = "-1" selected="selected">Select a country</option>
<?php 
    foreach ($countries as $key => $value) {
            echo '<option value = "'.$value->id.'-'.$value->country_type.'">'.trim($value->name).'</option>';
    }
?>
</select>
</div>
<div class="select_zones">
    <div class="city" style ="display:none;">
        City:
        <select name="city" id ="city" style="width:220px;">
        </select>
    </div>
</div>

这是js代码：

$("#country").select2(); 
    $("#city").select2();
    $("#country").change(function(){
        $("#city option").remove();
        value = $(this).val();
        value = value.split("-");
        $.post( "register/get_cities_from_dd", { country_type: value[1]})
            .done(function( data ) {
                obj = JSON.parse(data);
                for(var i in obj) {
                    $('<option>', {
                        text     : obj[i].name,
                        value    : obj[i].id
                    }).prependTo('#city');
                }
        });
        $(".city").show();
    });

这是控制器的功能：

   public function get_cities_from_dd(){

        $country_type = $_POST['country_type'];
        $cities = $this->register_model->get_cities($country_type);
        echo json_encode($cities);

    }

最后是模型：

 public function get_cities($country_type){

        return $this->db->query("SELECT id,name FROM cities WHERE city_type = '".$country_type."' ORDER BY `name` DESC ")->result();

    }

Answer 1

你正在加载过多的数据，没有办法改进这个（除了完全像你的问题的评论中所建议的那样改变它）。另请注意https://codereview.stackexchange.com/对于这个问题来说会更好。

解决问题的最佳方案是： Elasticsearch或任何旨在自动完成大量数据的等效软件。用户可以简单地开始键入城市的名称，软件可以完成它。我使用文本字段，等待至少两个字符并插入例如再次点击服务器之前，每次击键之间250ms超时（请求动画帧）。但是我仍然会将结果数量限制为例如如果你愿意，可以25或100。

如果你仍然想要坚持当前的实现，并且不想听取你的问题给出的许多评论（比如严重的SQL注入问题），那就去准备HTML文件。

我们有一个目录countries，其中包含每个国家/地区的选项，完全呈现，除了从服务器加载外无需执行任何操作：

/countries/at.html
/countries/us.html

当前的HTML文档：

<select id="country" name="country">
  <option value="at">Austria</option>
  <option value="us">United States</option>
</select>
<select id="cities" name="cities">
  <option selected>Please Select a Country</option>
</select>

我们的jQuery：

$("#country").change(function (event) {
  $("#citites").load("/cities/" + this.value + ".html");
});

但是，浏览器还是太多了。

如何减少ajax中函数的加载时间？

1 个答案: