Question

我对我为项目创建的jquery函数的执行顺序有疑问。功能如下。

$('#s_cust').change(function(event) {
                var custId = $("select#s_cust").val();
                $.get('ContactAjax', {
                    custId: custId
                }, function(jsonResponse) {
                    alert("jsonresp: " + jsonResponse);
                    cconjson = jsonResponse;
                    var select = $('#s_ccon');
                    $(select).find('option').remove();
                    $('<option>').text("Select").appendTo(select);
                    $.each(jsonResponse, function(key, value) {
                        $('<option>').val(key).text(value).appendTo(select);
                    });
                });
                if (cconjson != null) {
                    for (var j = 1; j <= i; j++) {
                        var select1 = $('#s_ccon' + j);
                        $(select1).find('option').remove();
                        alert("test");
                        $('<option>').text("Select").appendTo(select1);
                        $.each(cconjson, function(key, value) {
                            alert("key: " + key + " value:" + value);
                            $('<option>').val(key).text(value).appendTo(select1);
                        });
                    }
                }
            });

"'#s_ccon' + j"是因为我根据点击按钮动态生成文本框。

使用此函数时遇到的问题是，在刷新表单页面后，我更改了我的选择列表中的值s_cust，它进入ajax调用检索我的数据并正确填充s_ccon。当我再次更改s_cust的值时，它首先执行if循环，然后返回并执行ajax函数，我理解这是因为第二次更改后的第一个警报是alert("test")，然后是{{1} }，在此alert("key: " + key + " value:" + value)之后。

我不知道为什么会这样，请告诉我我在这里犯的错误。

Answer 1

由于Ajax是异步的，java脚本不等待ajax请求回来解决这个问题如上面的问题所提到的，我不得不把关于ajax的条件评估放在json响应函数本身里面，所以最后我的代码看起来像这样。

  $('#s_cust').change(function(event) {
            var custId = $("select#s_cust").val();
            $.get('ContactAjax', {
                custId: custId
            }, function(jsonResponse) {
                alert("jsonresp: " + jsonResponse);
                cconjson = jsonResponse;
                var select = $('#s_ccon');
                $(select).find('option').remove();
                $('<option>').text("Select").appendTo(select);
                $.each(jsonResponse, function(key, value) {
                    $('<option>').val(key).text(value).appendTo(select);
                });
                if (cconjson != null) {
                   for (var j = 1; j <= i; j++) {
                       var select1 = $('#s_ccon' + j);
                       $(select1).find('option').remove();
                       alert("test");
                       $('<option>').text("Select").appendTo(select1);
                       $.each(cconjson, function(key, value) {
                          alert("key: " + key + " value:" + value);
                          $('<option>').val(key).text(value).appendTo(select1);
                       });
                   }
                }
            });

        });

Answer 2

根据jQuery的文档，$.get是一个异步函数。它相当于

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

所以你无法预测执行的顺序。

如果您希望以同步方式进行，请直接使用$ .ajax并关闭异步。

$.ajax({
      url: url,
      data: data,
      async: false, 
      success: success,
      dataType: dataType
    });

同意，建议将所有代码放在成功回调中并遵循异步过程。

Jquery $ .get执行顺序

2 个答案: