Мой ответ на ajax-запрос зависает в моем браузере Firefox?

Question

Я создал надежный выпадающий список для страны и города, используя ajax в php. Если я запускаю его в Chrome или Opera, он работает, но если я запускаю его в Firefox, браузер зависает

$(document).ready(function(){
  $('#country').on('change',function(){
      var country_id=$(this).val();
      $.ajax({
            type:'POST',
            url:'ajax/get_state.php',
            data:{country_id:country_id},
            success:function(data){
              $('#state').html(data);
            },
            error:function(){

            }
        });
      });

  $('#state').on('change',function(){
  var state_id=$(this).val();
  $.ajax({
      type:'POST',
      url:'ajax/get_city.php',
      data:{state_id:state_id},
      success:function(data){
            $('#city').html(data);
          },
          error:function(){

          }
      });
    });
});

вот get_state.php: -

<?php

include '../config.php';
if(isset($_POST['country_id'])){
  $sql = mysqli_query($db_connect,"SELECT * FROM states where country_id = '".$_POST['country_id']."'") or die(mysqli_error($db_connect));

?>
<option value="0">Select State</option>
<?php
while($row = mysqli_fetch_array($sql)){

echo "<option value=".$row['id'].">".$row['name']."</option>";

}

}

?>

а вот get_city.php: -

<?php

include '../config.php';
if(isset($_POST['state_id'])){

$sql = mysqli_query($db_connect,"SELECT * FROM cities where state_id = '".$_POST['state_id']."'") or die(mysqli_error($db_connect));

?>
<option value="0">Select City</option>
<?php
while($row = mysqli_fetch_array($sql)){

echo "<option value=".$row['id'].">".$row['name']."</option>";

}

}

?>

вот мой ajax и весь php-код ajax. Этот код прекрасно работает в другом браузере, но если я запускаю в Firefox, Firefox зависает.

Answer 1

здесь я нашел какую-то проблему в вашем php-коде, которую вы просто отображаете для каждой строки

<?php

include '../config.php';
if(isset($_POST['country_id'])){
  $sql = mysqli_query($db_connect,"SELECT * FROM states where country_id = '".$_POST['country_id']."'") or die(mysqli_error($db_connect));

?>
$html .= "<option value='0'>Select State</option>";
<?php
while($row = mysqli_fetch_array($sql)){

$html .="<option value=".$row['id'].">".$row['name']."</option>";

}

}
echo $html;
?>

вы можете видеть в своем коде каждую строку, которую вы пытаетесь повторить, как правило, после того, как эхо-вызов ajax вызовет успешный вызов, он станет бесконечным

поэтому рекомендуется хранить в переменной $html и echo в последнем.

надеюсь, это поможет вам

Answer 2

измените свой код с помощью этого кода, он начнет работать правильно.

$(document).ready(function(){


$(document).on('change','#country',function(){
      var country_id=$(this).val();
      $.ajax({
            type:'POST',
            url:'ajax/get_state.php',
            data:{country_id:country_id},
            success:function(data){
              $('#state').html(data);
            },
            error:function(e){
                alert(e);
            }
        });
      });

  $(document).on('change','#state',function(){
  var state_id=$(this).val();
  $.ajax({
      type:'POST',
      url:'ajax/get_city.php',
      data:{state_id:state_id},
      success:function(data){
            $('#city').html(data);
          },
          error:function(e){
            alert(e);
          }
      });
    });
});

я сделал два изменения здесь

1. вместо этого я использую $(document).ready(function(){, если $('#country').on('change',function(){
2. а также нашел ошибку здесь $('#country,'). дополнительная запятая была thare.

Answer 3

В вашем ajax-запросе действительно должна быть обработка ошибок. Вероятно, он не зависает так сильно, как вы думаете, но на самом деле выдает ошибку.

Измените ваши пустые error: function() строки на:

error: function(res)
{
    console.log(res);
}

в вашей консоли ( F12 в Firefox) должно отображать некоторую отладочную информацию для вашего запроса ajax. Это поможет вам сузить проблему (в этом случае отредактируйте свой вопрос к этой конкретной проблеме).

Примечание: Не уверен, что это полностью классы в качестве ответа или комментария, так или иначе, это должно решить проблему замораживания и помочь в дальнейшей отладке.

Answer 4

Ваш код с ошибкой.

$(document).ready(function(){
  $('#country,').on('change',function(){

В $('#country,') есть лишняя запятая. Заменить на $('#country'). С этой ошибкой он не запустился для меня из любого браузера.