Блог

Это мой сайт. Идея заключается в том, что когда вы выбираете страну из dd, при изменении событий она вызывает функцию с использованием 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();

    }
  

Вы загружаете слишком много данных, нет способа улучшить это (кроме полного изменения, как предложено в комментариях к вашему вопросу). Также обратите внимание, что https://codereview.stackexchange.com / было бы лучшим местом для этого вопроса.

Лучшим решением вашей проблемы было бы, например, Elasticsearch или любое эквивалентное программное обеспечение, разработанное для автоматического заполнения огромных объемов данных. Пользователь мог просто начать вводить название города, а программное обеспечение могло завершить это. Я бы использовал текстовое поле, дождался как минимум двух символов и вставил, например, тайм-аут в 250 мс (кадр анимации запроса) между каждым нажатием клавиши, прежде чем снова обращаться к серверу. Но я бы все равно ограничил количество результатов, например, 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");
});
  

Тем не менее, это слишком много для браузера.