Question

我使用php中的ajax为国家和城市创建了可靠的下拉列表。如果我在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和所有ajax php代码。该代码在其他浏览器上可以正常工作，但是如果我在Firefox中运行，则Firefox会挂起。

Answer 1

使用此代码更改代码，它将开始正常工作。

$(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);
          }
      });
    });
});

我在这里做了两项更改

如果使用$(document).ready(function(){，我使用$('#country').on('change',function(){
并且还发现这里的错误$('#country,').逗号是thare。

Answer 2

您的ajax请求中确实应该有错误处理。它可能并没有您想象的那么多，但实际上是错误的。

将空的error: function()行修改为：

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

在您的控制台中（在Firefox中为 F12 ），应该显示有关您的Ajax请求的调试信息。这将帮助您缩小问题范围（在这种情况下，将您的问题编辑为该特定问题）。

注意：不确定该类是否可以作为答案或注释，这应该解决冻结问题并帮助进一步调试。

Answer 3

您的代码有错误。

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

$('#country,')中有多余的逗号。替换为$('#country')。出现该错误对于我来说，它还没有从任何浏览器运行。

Answer 4

在这里我在您的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中并在最后回显。

我希望它将对您有帮助

我的ajax请求响应挂起了我的Firefox浏览器？

4 个答案: