Question

最终编辑 - 答案：感谢大家的帮助。最后，在更改url名称时出现了一些htaccess问题，并且由于一些奇怪的原因，即使引用根（./ajax）它也不喜欢它。我不知道为什么，但它没有。当我对整个URL进行硬编码时，它起作用了。荒谬 - 感谢大家的帮助。每天都是上学日......

我无法弄清楚为什么这是错误的 - 有人可以请第二双眼睛 - 这可能是非常愚蠢的事情，感谢提前帮助：

编辑愚蠢的我把错误的网址放入 - 但是...现在我已经输入了正确的网址，网站只是挂起并崩溃了。有什么想法吗？

编辑2 为了在这篇文章中添加更多详细信息，会出现“加载...”div，因此ajax肯定会启动，然后页面崩溃并变得无法响应。我添加了额外的验证以确保PHP文件存在。确实如此。 PHP文件只是回显出一个h1标签。这是一个完整的谜，因为我昨天在家庭服务器上做了类似的ajax请求，它工作正常。

编辑3 感谢大家的投入和帮助。经过进一步测试，我从JQuery AJAX请求中删除了数据属性，它仍然完全没有响应并崩溃。这可能与服务器有关吗？我真的没有想法......

HTML：

<input id="pc" class="sfc" name="ProdCat[]" type="checkbox" value="">
<input id="psc" class="sfc" name="ProdSubCat[]" type="checkbox" value="">
<input id="bf" class="sfc" name="BrandFil[]" type="checkbox" value="">

JQuery的：

$('input[type="checkbox"]').change(function(){

    var name = $(this).attr("name");
    var ProdCatFil = [];
    var ProdSubCatFil = [];
    var BrandFil = [];

    // Loop through the checked checkboxes in the same group
    // and add their values to an array
    $('input[type="checkbox"]:checked').each(function(){

        switch(name) {

            case 'ProdCatFil[]': 
                ProdCatFil.push($(this).val());
            break;
            case 'ProdSubCatFil[]': 
                ProdSubCatFil.push($(this).val());
            break;
            case 'BrandFil[]': 
                BrandFil.push($(this).val());
            break;
        }
    });

    $("#loading").ajaxStart(function(){
        $(this).show();
        $('.content_area').hide();
    });

    $("#loading").ajaxStop(function(){
        $(this).hide();
        $('.content_area').show();
    });

    $.ajax({
        type: "GET",
        url: '../ajax/ajax.php',
        data: 'ProdCatFil='+ProdCatFil+'&ProdSubCatFil='+ProdSubCatFil+'&BrandFil='+BrandFil,
        success: function(data) {
            $('.content_area').html(data);
        }       
    }).error(function (event, jqXHR, ajaxSettings, thrownError) {
        $('.content_area').html("<h2>Could not retrieve data</h2>");
        //alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');
    });

});

PHP（只是为了证明它有效）：

echo '<h1>TEST TEST TEST </h1>';

Answer 1

一切都还可以，但你还是错了...... 请参阅data:属性：

$.ajax({
    type: "GET", // The get ajax type cannot send data as post
    url: '../ajax/ajax.php',
    data: 'ProdCatFil='+ProdCatFil+'&ProdSubCatFil='+ProdSubCatFil+'&BrandFil='+BrandFil,
    success: function(data) {
        $('.content_area').html(data);
    }       
}).error(function (event, jqXHR, ajaxSettings, thrownError) {
    $('.content_area').html("<h2>Could not retrieve data</h2>");
    //alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');
});

并使用type:"POST"：

进行更改

$.ajax({
    type: "POST",
    url: '../ajax/ajax.php',
    data: 'ProdCatFil='+ProdCatFil+'&ProdSubCatFil='+ProdSubCatFil+'&BrandFil='+BrandFil,
    success: function(data) {
        $('.content_area').html(data);
    }       
}).error(function (event, jqXHR, ajaxSettings, thrownError) {
    $('.content_area').html("<h2>Could not retrieve data</h2>");
    //alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');
});

Answer 2

试试这个你还没有添加错误的结束括号......

//添加文档就绪函数并删除复选框旁边的双括号，它应该是$（'input [type = checkbox]'）。change（function（）{in 2 places ..

$('input[type=checkbox]').change(function(){

    var name = $(this).attr("name");
    var ProdCatFil = [];
    var ProdSubCatFil = [];
    var BrandFil = [];

    // Loop through the checked checkboxes in the same group
    // and add their values to an array
    $('input[type=checkbox]:checked').each(function(){

        switch(name) {
           case 'ProdCatFil[]': 
                ProdCatFil.push($(this).val());
                break;
           case 'ProdSubCatFil[]': 
                ProdSubCatFil.push($(this).val());
                break;
           case 'BrandFil[]': 
                BrandFil.push($(this).val());
                break;
        }

    });


    $("#loading").ajaxStart(function(){
        $(this).show();
        $('.content_area').hide();
    });

    $("#loading").ajaxStop(function(){
        $(this).hide();
        $('.content_area').show();
    });

    $.ajax({
        type: "GET",
        url: '../ajax/ajax.php',
        data: 'ProdCatFil='+ProdCatFil+'&ProdSubCatFil='+ProdSubCatFil+'&BrandFil='+BrandFil,
        success: function(data) {
            $('.content_area').html(data);
        }       
    }).error(function (event, jqXHR, ajaxSettings, thrownError) {
        $('.content_area').html("<h2>Could not retrieve data</h2>");
        //alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');
        });
    });

或者您可以在更改

时使用我的ajax请求

var detailGet = 'ProdCatFil='+ProdCatFil+'&ProdSubCatFil='+ProdSubCatFil+'&BrandFil='+BrandFil;
        // Use POST or GET
$.get("../ajax/ajax.php", detailGet, function (response, status, xhr) {
    if(status == "success") {
        $('.content_area').html(response);
    } else if(status == "error") {
        alert('Something when wrong.');                
    }
});

Answer 3

我瘦你错误地将字符串与数据对象中的数组连接起来。

$.ajax({
    type: "GET",
    url: '../ajax/ajax.php',
    data: 'ProdCatFil='+ProdCatFil+'&ProdSubCatFil='+ProdSubCatFil+'&BrandFil='+BrandFil,
    success: function(data) {
        $('.content_area').html(data);
    }       
}).error(function (event, jqXHR, ajaxSettings, thrownError) {
    $('.content_area').html("<h2>Could not retrieve data</h2>");
    //alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');
});

尝试使用键/值对的对象可以解决您的问题

$.ajax({
    type: "GET",
    url: '../ajax/ajax.php',
    data: { // Here I use an object with key/value pairs. If value is an Array, jQuery serializes multiple values with same key.
        'ProdCatFil': ProdCatFil,
        'ProdSubCatFil': ProdSubCatFil,
        'BrandFil': BrandFil
    },
    success: function(data) {
        $('.content_area').html(data);
    }       
}).error(function (event, jqXHR, ajaxSettings, thrownError) {
    $('.content_area').html("<h2>Could not retrieve data</h2>");
    //alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');
});

Answer 4

你可以试试这个：

$('input[type="checkbox"]').change(function(){

    var name = $(this).attr("name");
    var ProdCatFil = [];
    var ProdSubCatFil = [];
    var BrandFil = [];

    // Loop through the checked checkboxes in the same group
    // and add their values to an array
    $('input[type="checkbox"]:checked').each(function(){

        switch(name) {

           case 'ProdCatFil[]': 
                ProdCatFil.push($(this).val());
                break;

           case 'ProdSubCatFil[]': 
                ProdSubCatFil.push($(this).val());
                break;

           case 'BrandFil[]': 
                BrandFil.push($(this).val());
                break;

           default:
                // Checkboxes which are not
                // a part of this loop.
                break;

        }

    });

    $("#loading").show();
    $('.content_area').hide();

    $.ajax({
        type: "GET",
        url: '../ajax/ajax.php',
        data: 'ProdCatFil=' + encodeURIComponent(ProdCatFil.join(",")) + '&ProdSubCatFil=' + encodeURIComponent(ProdSubCatFil.join(",")) + '&BrandFil=' + encodeURIComponent(BrandFil.join(",")),
        success: function(data) {
            $('.content_area').html(data);
        },
        complete: function () {
            $("#loading").hide();
            $('.content_area').show();
        }
    }).error(function (event, jqXHR, ajaxSettings, thrownError) {
        $('.content_area').html("<h2>Could not retrieve data</h2>");
        //alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');
    });

});

Answer 5

<script type="text/javascript">
    $(document).ready(function () {
        $("input[type=checkbox]").change(function () {
            var name = $(this).attr("name");
            var ProdCatFil = [];
            var ProdSubCatFil = [];
            var BrandFil = [];
            // Loop through the checked checkboxes in the same group
            // and add their values to an array
            $('input[type=checkbox]:checked').each(function () {
                switch (name) {
                    case 'ProdCatFil[]':
                        ProdCatFil.push($(this).val());
                        break;

                    case 'ProdSubCatFil[]':
                        ProdSubCatFil.push($(this).val());
                        break;

                    case 'BrandFil[]':
                        BrandFil.push($(this).val());
                        break;
                }
            });

            $("#loading").ajaxStart(function () {
                $(this).show();
                $('.content_area').hide();
            });

            $("#loading").ajaxStop(function () {
                $(this).hide();
                $('.content_area').show();
            });

            $.ajax({
                type: "GET",
                url: 'ajaxReq.php',
                data: 'ProdCatFil=' + ProdCatFil + '&ProdSubCatFil=' + ProdSubCatFil + '&BrandFil=' + BrandFil,

                success: function (data) {

                    $('.content_area').html(data);
                }
            }).error(function (event, jqXHR, ajaxSettings, thrownError) {
                $('.content_area').html("<h2>Could not retrieve data</h2>");
                //alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');
            });
        });
    });
</script>

AJAX请求错误

5 个答案: