Question

在我的php页面中，我使用jquery代码使其动态化，我在创建查询字符串时遇到问题，我的代码示例很小。

$.listSemester = function(selStreamId) {
    var obj = { year: $( "#batches option:selected" ).text() };
    $.ajax({
        url:"searchStream.php?" + $.param(obj),
        data:{
            streamId:selStreamId,
        },
        success: function(data) {
            $('#sem').html(data);
        },
        error: function(error) {
            alert(error);
        }
    });
}

我想在查询字符串中传递变量 year ，并且它的值来自另一个jquery代码。我的完整jquery代码是。

$(document).ready(function() {
    $('.sidebar-menu .system').addClass('active');
    $('.sidebar-menu .system .student').addClass('active');
    $(".sidebar-menu .system").tree();
    $('#streams').change(function() {
        $('#branches').html("<option value=''>-- Select --</option>");
        $('#batches').html("<option value=''>-- Select --</option>");
        $('.divAfter').hide();
        $('.divBefore').show();
        $('.semesterAfter').hide();
        $('.semesterBefore').show();
        $('.btnAdd').hide();
        $('.btnExcel').hide();
        $('.studList').hide();
        if($(this).val() == '') {
        }
        else {
            $.when($.streamSelection($(this).val())).then($.listSemester($(this).val()));
        }
    });
    $('#branches').change(function() {
        $('#batches').html("<option value=''>-- Select --</option>");
        $('.divAfter').hide();
        $('.divBefore').show();
        $('.semesterAfter').hide();
        $('.semesterBefore').show();
        $('.btnAdd').hide();
        $('.btnExcel').hide();
        $('.studList').hide();
        if($(this).val() == '') {
        }
        else {
            $.branchSelection($(this).val());
        }
    });
    $('#batches').change(function() {
        if($(this).val() == '') {
            $('.divAfter').hide();
            $('.divBefore').show();
            $('.semesterAfter').hide();
            $('.semesterBefore').show();
            $('.btnAdd').hide();
            $('.btnExcel').hide();
            $('.studList').hide();
        }
        else {
            $('.divBefore').hide();
            $('#division').val('');
            $('.divAfter').show();
        }
    });
    $('#division').change(function() {
        $('.studList').hide();
        $('.semesterAfter').hide();
        $('.semesterBefore').show();
        $('.btnAdd').hide();
        $('.btnExcel').hide();
        if($(this).val() != '') {
            $('.semesterBefore').hide();
            $('#sem').val('');
            $('.semesterAfter').show();
        }
    });
    $('#sem').change(function() {
        $('.btnAdd').hide();
        $('.btnExcel').hide();
        $('.studList').hide();
        if($(this).val() != '') {
            $.when($('.btnAdd').attr('href', 'add.php?streamId='+$('#streams').val()+'&branchId='+$('#branches').val()+'&batchId='+$('#batches').val()+'&divisionId='+$('#division').val()+'&semId='+$('#sem').val()))
            .then($('.btnExcel').attr('href', 'studExcel.php?streamId='+$('#streams').val()+'&branchId='+$('#branches').val()+'&batchId='+$('#batches').val()+'&divisionId='+$('#division').val()+'&semId='+$('#sem').val()))
            .then($('.btnAdd').show())
            .then($.studentList($('#streams').val(),$('#branches').val(),$('#batches').val(),$('#division').val(),$('#sem').val()));
        }
    });
});
$.streamSelection = function(selStreamId) {
    $.ajax({
        url:"searchBranch.php",
        data:{
            streamId:selStreamId
        },
        success: function(data) {
            $('#branches').html(data);
        },
        error: function(error) {
            alert(error);
        }
    });
}
$.branchSelection = function(selBranchId) {
    $.ajax({
        url:"searchBatch.php",
        data:{
            branchId:selBranchId,
        },
        success: function(data) {
            $('#batches').html(data);
        },
        error: function(error) {
            alert(error);
        }
    });
}
$.listSemester = function(selStreamId) {
    var obj = { year: $( "#batches option:selected" ).text() };
    $.ajax({
        url:"searchStream.php?" + $.param(obj),
        data:{
            streamId:selStreamId,
        },
        success: function(data) {
            $('#sem').html(data);
        },
        error: function(error) {
            alert(error);
        }
    });
}
$.studentList = function(streamId,branchId,batchId,divisionId,semId) {
    $.ajax({
        url:"searchStudent.php",
        data:{
            selStreamId     :   streamId,
            selBranchId     :   branchId,
            selBatchId      :   batchId,
            selDivisionId   :   divisionId,
            selSemId        :   semId
        },
        success: function(data) {
            $('.studList').html(data);
            $('.studList').show();
            if(data.length > 0)
                $('.btnExcel').show();
        },
        error: function(error) {
            alert(error);
        }
    });
}

现在它通过了查询字符串。

Answer 1

你不能在回调函数中使用this，它不会保存在闭包中。创建一个局部变量。

此外，.then()的参数必须是函数，否则您将立即调用$.listSemester，而不是在AJAX调用返回时。

$('#streams').change(function() {
    var $this = $(this);
    $('#branches').html("<option value=''>-- Select --</option>");
    $('#batches').html("<option value=''>-- Select --</option>");
    $('.divAfter').hide();
    $('.divBefore').show();
    $('.semesterAfter').hide();
    $('.semesterBefore').show();
    $('.btnAdd').hide();
    $('.btnExcel').hide();
    $('.studList').hide();
    if($this.val() == '') {
    }
    else {
        $.when($.streamSelection($this.val())).then(function() {
            $.listSemester($this.val());
        });
    }
});

由于$.when()的参数必须是Deferred，因此您需要从$.streamSelection()返回一个值。

$.streamSelection = function(selStreamId) {
    return $.ajax({
        url:"searchBranch.php",
        data:{
            streamId:selStreamId
        },
        success: function(data) {
            $('#branches').html(data);
        },
        error: function(error) {
            alert(error);
        }
    });
}

或者，因为您只对该值感兴趣，所以您可以将其保存在变量中。

$('#streams').change(function() {
    var $thisVal = $(this).val();
    $('#branches').html("<option value=''>-- Select --</option>");
    $('#batches').html("<option value=''>-- Select --</option>");
    $('.divAfter').hide();
    $('.divBefore').show();
    $('.semesterAfter').hide();
    $('.semesterBefore').show();
    $('.btnAdd').hide();
    $('.btnExcel').hide();
    $('.studList').hide();
    if($thisVal == '') {
    }
    else {
        $.when($.streamSelection($thisVal)).then(function() {
            $.listSemester($this.val());
        });
    }
});

您需要对其他功能进行类似的修复。

jquery查询字符串创建问题

1 个答案: