0

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

我一生都无法弄清楚为什么这是错误的-有人可以再看一眼-这可能真的很愚蠢，在此先感谢您的帮助：

愚蠢地编辑我输入了错误的 URL - 但是......现在我输入了正确的 URL，该网站只是挂起并崩溃。请问有什么想法吗？

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

编辑 3到目前为止，感谢大家对此的投入和帮助。经过进一步测试，我从 JQuery AJAX 请求中删除了 data 属性，但它仍然完全没有响应并崩溃。这可能与服务器有关吗？我真的没办法了……

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="">

查询：

$('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>';
4

5 回答 5

0

一切都好，但你还是错了......看看你的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 + '])');
});
于 2012-12-10T11:17:36.443 回答
0

试试这个你没有添加错误的右括号......

//添加文档准备功能并删除复选框周围的双括号它应该是 $('input[type=checkbox]').change(function(){ 在2个地方..

$('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.');                
    }
});
于 2012-12-10T11:18:56.863 回答
0

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

$.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 + '])');
});
于 2012-12-10T11:32:01.620 回答
0 
<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>
于 2012-12-10T12:09:58.150 回答
0

你可以试试这个：

$('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 + '])');
    });

});
于 2012-12-10T11:47:22.697 回答