Question

我需要发送带有复选框值的ajax请求（每次点击/检查）。我有三个带复选框的列表，每个列表都过滤来自php的数据returend（带有mysql AND条件）：

$('body').on('click', '.click, :checkbox, .pag_link', function() {

    var self = this;

    // radio buttons
    if ($('#res_prop').is(':checked')) {
        var use = $('#res_prop').val();
    }
    else if ($('#com_prop').is(':checked')) {
        var use = $('#com_prop').val();
    }
    else {
        $('p.error').show();
        die();
    }
    //checkboxes from each list have the same class, is this ok?
    if ($(self).is(':checkbox')) {
        $(self).on('change', function() {
            if ($(self).prop('class') == 'filter1' || $('.filter1').is(':checked')) {
                if ($('.filter1').is(':checked'))
                    var type = $(self).val(); // maybe should be an array
                else var type = null;
            } else var type = null;
            if ($(self).prop('class') == 'filter2' || $('.filter2').is(':checked')) {
                if ($('.filter2').is(':checked'))
                    var status = $(self).val(); // maybe should be an array
                else var status = null;
            } else var status = null;
            if ($(self).prop('class') == 'filter3' || $('.filter3').is(':checked')) {
                if ($('.filter3').is(':checked'))
                    var bhk = $(self).val(); // maybe should be an array
                else var bhk = null;
            } else var bhk = null;
        });
    }
    else {
        var type = status = bhk = null;
    }

    if ($(self).is('.pag_link')) {
        if ($(self).text() == '«')
            var page = (parseInt($('.active').text()) - 1);
        else if ($(self).text() == '»')
            var page = (parseInt($('.active').text()) + 1);
        else
            var page = parseInt($(self).text());
    }
    else {
        var page = 1;
    }

    $.ajax({
        method: 'POST',
        url: '/search',
        data: {
            'do': getUrlParameter('do'),
            'use': use,
            'type': type,
            'status': status,
            'bhk': bhk,
            'city': $('select[name="city"]').val(),
            'zone': $('select[name="zone"]').val(),
            'page': page
        }
    }).done(function(data) {
        if ($( '#search' ).is(':visible'))
            $( '#search' ).hide();

        if ($(self).is(':checkbox')) {
        alert('should work');
            var new_content = $(data).find( '#scroll-to-list' );
            $( '#scroll-to-list' ).replaceWith( new_content );
        }
        else {
            var new_content = $(data).find( '#search-filters, #scroll-to-list' );
            $( '#results' ).html( new_content );
            $( 'html, body' ).animate({
                scrollTop: $( '#scroll-to-list' ).offset().top
            }, 1000);
        }

    });
});

我正在查看每次点击/检查以执行ajax请求并打印新结果（依赖服务器是性能方面的吗？）。如果选中，则变量获取值并发送，如果未选中，则变量变为null。 search.php脚本处理mysql Select查询（ifs将AND条件添加到查询中）。

我在数据库中只有一个示例但是复选框脚本不起作用（或者mysql选择查询不包括和条件，我认为问题出在jquery中，php脚本很好）。

$use            = isset( $_POST['use'] ) ? (int) $_POST['use'] : '';        // int AJAX
$filter_type    = isset( $_POST['type'] ) ? (int) $_POST['type'] : '';      // int AJAX
$filter_status  = isset( $_POST['status'] ) ? (int) $_POST['status'] : '';  // int AJAX
$filter_bhk     = isset( $_POST['bhk'] ) ? (int) $_POST['bhk'] : '';        // int AJAX
$filter_city    = isset( $_POST['city'] ) ? (int) $_POST['city'] : 0;       // int AJAX
$filter_zone    = isset( $_POST['zone'] ) ? (int) $_POST['zone'] : 0;       // int AJAX
$page_number    = isset( $_POST['page'] ) ? (int) $_POST['page'] : '';      // int AJAX

if ($filter_type != NULL || $filter_type != '') {
    $filter_type = 'AND t2.type = ' . $filter_type;
} else $filter_type = NULL;
if ($filter_status != NULL || $filter_status != '') {
    $filter_status = 'AND t2.status = ' . $filter_status;
} else $filter_status = NULL;
if ($filter_bhk != NULL || $filter_bhk != '') {
    $filter_bhk  = 'AND t2.bhk = ' . $filter_bhk;
} else $filter_bhk = NULL;

if ($filter_city > 0) {
    $filter_city = 'AND t2.city = ' . $filter_city;
    $filter_zone = NULL;

    if ($filter_zone > 0) {
        $filter_zone = 'AND t2.zone = ' . $filter_zone;
    }
} else $filter_city = $filter_zone = NULL;

if ($stmt = $mysqli->prepare(' SELECT t1.id, t2.*
                               FROM ' . $table . ' t1 // not from get/post
                               INNER JOIN property t2 ON t2.id = t1.id
                               WHERE t2.use = ?
                               ' . $filter_type
                                 . $filter_status
                                 . $filter_bhk
                                 . $filter_city
                                 . $filter_zone . '
                               LIMIT ?, ?')) {
    $stmt->bind_param('iii', $use, $start, $limit);
    $stmt->execute();

Answer 1

我刚发现这个JQuery方法.serialize() ......它改变了我的生活：）

$('body').on('click', '.click, :checkbox, .pag_link', function() {

    var self = this;

    if (!$(':radio').is(':checked')) {
        $('p.error').show();
        die();
    }

    var data = $('input, select').serializeArray(),
        mode = getUrlParameter('do'),
        page = 1;

    if ($(self).is('.pag_link')) {
        if ($(self).text() == '«')
            page = (parseInt($('.active').text()) - 1);
        else if ($(self).text() == '»')
            page = (parseInt($('.active').text()) + 1);
        else
            page = parseInt($(self).text());
    }

    data.push({ name : 'do',   value : mode});
    data.push({ name : 'page', value : page});

    alert($.param(data));
    $.ajax({
        method: 'POST',
        url: '/search',
        data: $.param(data)
    }).done(function (data) {
        if ($( '#search' ).is(':visible'))
            $( '#search' ).hide();

        if ($(self).is(':checkbox')) {
            var new_content = $(data).find( '#scroll-to-list' );
            $( '#scroll-to-list' ).replaceWith( new_content );
        }
        else {
            var new_content = $(data).find( '#search-filters, #scroll-to-list' );
            $( '#results' ).html( new_content );
            $( 'html, body' ).animate({
                scrollTop: $( '#scroll-to-list' ).offset().top
            }, 1000);
        }

    });
});

希望它有所帮助。

ajax根据复选框值发送数据

1 个答案: