管理对PHP脚本的多个AJAX调用

Question

我有一组5个HTML下拉菜单，它们充当筛选器，用于缩小从mySQL数据库返回的结果的范围。 这三个相关的过滤器分别用于“省”，“区域”和“城市”选择。

我有三个功能：

1. findSchools() ，当更改任何过滤器（标记为CSS class .filter ）时运行，并通过AJAX从PHP脚本中获取结果。 完成后，将调用另外两个函数...

2. changeRegionOptions() ，它在更改“省”过滤器后，会使用与第一个函数相同的方法来更新可用选项，但会发布到其他脚本中。

3. changeCityOptions() ，如果更改了“区域”过滤器，则运行，并再次使用相同的方法更新选项。

问题在于，由于我希望这些AJAX函数同时运行，并且它们本质上是异步运行的，因此我尝试使用$.when来控制函数的执行，但并不能解决问题。

这些功能会运行，但是“地区”和“城市”过滤器将返回空白（无选项）； 即使POST请求通过，FireBug报告也绝对不会显示任何输出。 正常发送已发布的filter_province参数，但最后一个区域的参数将被截断-它以filter_region=发送，未传递任何值。 所以我想我的逻辑在某处是错误的。 代码如下：

// When any of the filters are changed, let's query the database...
$("select.filter").change(function() {
    findSchools();
});

  // First, we see if there are any results...
      function findSchools() {

          var sch_province = document.filterform.filter_province.value;
          var sch_region = document.filterform.filter_region.value;
          var sch_city = document.filterform.filter_city.value;
          var sch_cat = document.filterform.filter_category.value;
          var sch_type = document.filterform.filter_type.value;

          $.post("fetch_results.php",
          { filter_province : sch_province,
            filter_region : sch_region,
            filter_city : sch_city,
            filter_category : sch_cat,
            filter_type : sch_type },

            function(data) {

              $("#results").html("");
              $("#results").hide();
              $("#results").html(data);
              $("#results").fadeIn(600);
            }
          );

    // Once the results are fetched, we want to see if the filter they changed
       was the one for Province, and if so, update the Region and City options
        to match that selection...

            $("#filter_province").change(function() {

                $.when(findSchools())
                .done(changeRegionOptions());

                $.when(changeRegionOptions())
                .done(changeCityOptions());
        });
  };

这只是我尝试解决的方法之一； 我尝试使用IF语句，并尝试直接在常规select.filter.change()函数内部（在findSchools();之后select.filter.change()调用函数，但是它们都返回相同的结果。

任何帮助都会很棒！

Answer 1

您需要将异步设置为false。 之后，您的代码将逐行执行。

例如这样，在调用$ .post之前

$.ajaxSetup({async:false});

Answer 2

试试这个。希望这就是您所期望的。 jsfiddle->示例代码