在第一个 Jquery 完成之前，第二个 Jquery json 被触发

Question

我有两个 javascript 函数，它们使用 jquery json 填充一些数据。两者都工作正常，但问题是第二个函数在第一个函数执行之前被调用。我的代码是：

$(document).ready(function () {        
    loadSubject();
    getTopic();       
});

function loadSubject() {
    var CourseId = document.getElementById('CourseId').value;
    alert('22222');
    jQuery.support.cors = true;
    $.ajax({
        url: 'http://220.45.89.129/api/LibraryApi',
        type: 'Get',
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        data: { DataType: 'Subject', UserRecId: 0, ParentId: CourseId },
        dataType: 'json',
        success: function (data) {
            var subjectDivs = "";
            var divs = "";
            var i = 1;
            $.each(data, function (index, value) {
                divs = "";
                // Some code here
                i = i + 1;
            });
            subjectDivs = subjectDivs + divs;
            alert('11111');
            $('#cCount').val(i);
            document.getElementById('accordion').innerHTML = subjectDivs;
        },
        error: function (e) {
            alert(JSON.stringify(e));
        }
    });
}

function getTopic() {
    var c = $('#cCount').val();
    alert(c);
    for (var i = 1; i <= c; i++) {
        var subId = $('#hdn_' + i).val();
        jQuery.support.cors = true;
        $.ajax({
            url: 'http://220.45.89.129/api/LibraryApi',
            type: 'Get',
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            data: { DataType: 'Topic', UserRecId: 0, ParentId: subId },
            dataType: 'json',
            success: function (data) {
                var topicDivs = "";
                var divs = "";
                tDivs = '';
                $.each(data, function (index, value) {
                    divs = '';
                    divs = '<div class="row">';
                    divs = divs + '<div class="subject">' + value.Name + '</div>';
                    divs = divs + "</div>";
                    topicDivs = topicDivs + divs;
                });
                $('#sDiv_' + i).html(topicDivs);
            },
            error: function (e) {
                alert(JSON.stringify(e));
            }
        });
    }
}

Answer 1

这不是 ajax get 的执行方式。如果您将两个 jquery ajax 请求一个接一个地放置，那么它们将按顺序执行，不需要在第一个请求完成或收到第一个请求的响应后执行第二个请求。

如果你想让这种情况发生，那么有两种方法

1.使用 async:'false'

这会请求等待，直到收到响应，然后再在 javascript 中执行下一条语句。

What does "async: false" do in jQuery.ajax()?

2。使用回调

编写您想要成功执行的第二个函数或完成第一个 ajax 请求的回调。

jQuery ajax success callback function definition

Answer 2

尝试在loadSubject和getTopic中的$.ajax({})之前添加return语句，返回jQuerypromise对象，可以在deferred.then处理

    function loadSubject() {
      return $.ajax()
    }

    function getTopic() {
      return $.ajax()
    }

    loadSubject().then(getTopic);

---

function a() {
  return new $.Deferred(function(dfd) {
    setTimeout(function() {
      dfd.resolve(1) 
    }, 2000)
  }).promise().then(function(data) {
    console.log(data)
  })
}

function b() {
  return new $.Deferred(function(dfd) {
    setTimeout(function() {
      dfd.resolve(2) 
    }, 2000)
  }).promise().then(function(data) {
    console.log(data)
  })
}

a().then(b)

Answer 3

你必须在你的第一个 ajax 请求中添加 async:false，它会停止下一次执行，直到第一个 ajax 请求完成它的执行。 所以你的第一个函数是这样的

function loadSubject() {
var CourseId = document.getElementById('CourseId').value;
jQuery.support.cors = true;
$.ajax({
    url: 'http://220.45.89.129/api/LibraryApi',
    type: 'Get',
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    data: { DataType: 'Subject', UserRecId: 0, ParentId: CourseId },
    dataType: 'json',
    async:false,
    success: function (data) {
        var subjectDivs = "";
        var divs = "";
        var i = 1;
        $.each(data, function (index, value) {
            divs = "";
            // Some code here
            i = i + 1;
        });
        subjectDivs = subjectDivs + divs;
        alert('11111');
        $('#cCount').val(i);
        document.getElementById('accordion').innerHTML = subjectDivs;
    },
    error: function (e) {
        alert(JSON.stringify(e));
    }
});

}

Answer 4

从第一个ajax success function调用第二个函数

$(document).ready(function () {        
    loadSubject();
});

    function loadSubject() {
        // code here
        $.ajax({
            url: 'http://220.45.89.129/api/LibraryApi',
            type: 'Get',
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            data: { DataType: 'Subject', UserRecId: 0, ParentId: CourseId },
            dataType: 'json',
            success: function (data) {
               //code here
                   getTopic();    // Second function calling
            },
            error: function (e) {
                alert(JSON.stringify(e));
            }
        });
    }

现在，当第一个函数成功执行时，将调用第二个函数。