jQuery查询字符串创建问题

Divyesh Jesadiya 发表于 Dev

Divyesh jesadiya

在我的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);
        }
    });
}

现在通过查询字符串。

巴尔玛

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

另外，to的参数.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());
        });
    }
});

并且由于to的参数必须$.when()是a 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());
        });
    }
});