Question

我已经按照this codereview回答来改进嵌套的jQuery AJAX请求。我的应用程序有一堆select标签层次结构。在第一个select标记中使用更改值时，它会向/get_courses/触发查询，并返回JSON响应。然后我用该数据操作DOM并创建另一个select标记。当用户更改第二个select标记的值时，它会向/get_subjects/发送查询，并且还会返回JSON响应。

所以，这就是流程应该如何运作。

我的HTML代码：

<p><select id="university">
    <option value="1">foo</option>
    <option value="2">bar</option>
</select></p>
<p><select id="course_select"></select></p>
<p><select id="subject_select"></select></p>
<p><select id="exams_select"></select></p>

使用promises时，我无法获得course_select的值。所以，我无法向/get_subjects/发送查询等等。

这是我目前的js代码：

$('#university').change(function() {

    callAjax('http://localhost:8000/exams/get_courses/', {
            'ui': $(this).val()
        })
        .then(function(data) {
            var course_select = document.getElementById('course_select'),
                course_option = document.createDocumentFragment();
            for (i = 0; i < data.length; i++) {
                var option = document.createElement('option');
                option.value = data[i].id;
                option.appendChild(document.createTextNode(data[i].name));
                course_option.appendChild(option);
            }
            course_select.appendChild(course_option);
        })
        .then(
            $('#course_select').change(
                function() {
                    // Here I want to call callAjax method.
                })
        ).then(function(data) {
            // I want to manipulate DOM with data that I got back.
            // But I am not getting value of 'course_select'
        })

});

function callAjax(url, data) {
    return $.ajax({
        type: 'GET',
        url: url,
        data: data
    });
}

我在这里缺少什么？或者有没有比这更好的做法？

当使用jQuery .change（）方法时，JavaScript承诺不起作用

0 个答案: