Question

我有一组5个HTML下拉列表，用作缩小mySQL数据库返回结果的过滤器。三个相关过滤器分别用于“省”，“区域”和“城市”选择。

我有三个功能：

findSchools()，当任何过滤器（标有CSS类.filter）发生变化时运行，并从PHP脚本通过AJAX获取结果。完成后，还会调用另外两个函数......
changeRegionOptions()，在更改“省”过滤器时，使用与第一个函数相同的方法更新可用选项，但发布到其他脚本。
changeCityOptions()，如果更改了“Region”过滤器，则会运行，并再次使用相同的方法更新选项。

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

函数运行，但Region和City过滤器返回空白（无选项）; FireBug报告显示绝对没有输出，即使POST请求通过。 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();之后），但它们都返回相同的结果。

任何帮助都会很棒！

Answer 1

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

例如像这样，在调用$ .post

之前

$.ajaxSetup({async:false});

Answer 2

试试这个。希望这就是你所期待的。 jsfiddle->sample code

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

2 个答案: