Question

我正在制作一个显示电子商务网站页面的产品。产品将根据客户检查的品牌进行品牌过滤。为此，我每次检查品牌时都使用了ajax请求。问题是页面无法接收我发送到同一页面的get变量。 ajax请求没有给出任何错误，并且chrome调试器端也没有显示任何错误。这是页面： snapshot of the products page

这是页面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<?php 
    session_start();
    include('includes/pdo_connect.php');
    include('includes/pdo_functions.php');


    $logged_in;
    $user_first_name;

    if(isset($_SESSION['user'])){           //Determining if the user is logged in or not.
        if($_SESSION['user']=='user'){
            $user_id = $_SESSION['user_id'];
            global $logged_in;
            $logged_in = true;
            global $user_first_name;
            $user_first_name = $_SESSION['user_first_name'];
        }
    } else {
        $_SESSION['user'] = 'guest';
        $user_id = $_SERVER['REMOTE_ADDR'];
    }

    $cat;

    if(isset($_GET['cat'])){
        global $cat;
        $cat = $_GET['cat'];
    }


    include('includes/logged_in.php');



    if(isset($_GET['brand_list'])){
        $brand_list = $_GET['brand_list']; 

    } else {
        echo "<script>alert('value not received');</script>";
    }


?>
<html>
<head>
    <title></title>


    <link rel="stylesheet" type="text/css" href="styles/list_style.css?<?php echo time(); ?>">
    <link rel="stylesheet" type="text/css" href="styles/thickbox.css" media="screen">

    <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="js/thickbox.js"></script>

    <?php 


    $where = array();

    if(!empty($brand_list)){
        echo "ajax working";
    if(strpos($brand_list, ',')!==false){
        $brand_choices = explode(',', $brand_list);
        $barray = array();
        foreach($brand_choices as $value) {
            $barray[] = "brand_id = $value";
        }
        $where[] = '('.implode(' OR ', $barray).')';
    } else {
        $where[] = '(brand_id= '.$brand_list.')';
    }
    } else {
    //echo "ajax not working ";
    }

    $w = implode(' AND ', $where);

    $w = "where product_cat=$cat ".$w;


    $filter_query = "select * from products $w ";
    echo "filter query: ".$filter_query;

    $first_load = 'filter';

    function show_filtered(){
        //echo "<script>alert('filter query working');</script>";
    global $filter_query;
    global $con;
    global $brand_name;

    try{

        $stmt = $con->prepare($filter_query);

        $stmt->execute();

        $result = $stmt->fetchAll();

        foreach ($result as $data) {

            $product_id = $data['product_id'];
            $product_cat = $data['product_cat'];
            $product_brand = $data['product_brand'];
            $product_title = $data['product_title'];
            $product_price = $data['product_price'];
            $product_desc = $data['product_desc'];
            $product_image = $data['product_image'];

            echo "
                    <div class='product_container $brand_name'>
                        <a href='details.php?pid=".$product_id."' alt='".$product_title."'>
                          <div class='img_div'>
                            <img src='admin/product_images/".$product_image."?".time()."' alt='".$product_title."'/>
                          </div>
                          <div class='index_product_desc'>".$product_title."</div>
                          <div class='index_product_price'>&#8377;".$product_price."</div>
                        </a>
                    </div>
            ";
        }

    } catch(PDOException $e){
        echo "Error in show_list(): ".$e->getMessage();
    }

    }


    function show_brands(){
        global $con;
        global $cat;
        global $brand_name;

        try{
            $query = "select * from cat_brand where cat_id = $cat";

            $stmt = $con->prepare($query);

            $stmt->execute();

            $result = $stmt->fetchAll();

            //$brand = array();

            foreach ($result as $data) {
                $brand_id = $data['brand_id'];

                //echo "<script>alert('$brand_id');</script>";

                $query1 = "select * from brands where brand_id = $brand_id";

                $stmt1 = $con->prepare($query1);

                $stmt1->execute();

                $result1 = $stmt1->fetchAll();

                echo "<ul>";

                foreach ($result1 as $data1) {
                    $brand_name = $data1['brand_title'];

                    echo "<li><input type='checkbox' value='$brand_id' id='$brand_name' class='brand_check' name='brandchoice'>&nbsp;$brand_name</li>";

                }

                echo "</ul>";
            }
        } catch(PDOException $e){
            echo "Error in show_brands: ".$e->getMessage();
        }
    }

    function show_price(){

    }
?>


</head>
<body>

    <div class="wrapper">
        <header>
                <div class="home_logo">
                    <a href="index.php">
                        <img src="images/skyshop_sumopaint.png" alt="Site Home">
                    </a>
                </div>
                <div class="login">
                    <a href=""><?php user();?></a>&nbsp;&nbsp;&#124;&nbsp;
                    <a href="register.php"><?php login_status(); ?></a>
                </div>
                <div class="form">
                    <form method="get" target="" name="searchbar_form">
                        <input type="text" name="searchbar" id="searchbar">
                        <input type="submit" id="search_button" value="Search">
                    </form>
                </div>
        </header>
        <div class="menubar">

                    <div class="dropdown">
                        <button onclick="dropdownToggle()" class="dropdown-button">Shop By Category</button>
                        <ul class="dropdown-content" id="dropdownContent">
                            Categories
                            <?php getcats(); ?>
                        </ul>
                    </div>
                <div class="menubar-div">
                    <ul class="menu-items">
                        <?php getcats(); ?>
                    </ul>
                </div>
                <div class="cart">
                    <a href="cart.php">Cart (0)</a>
                </div>
        </div>

        <div class="content">
            <div class="nav">

            </div>
            <div class="list_wrapper">

<!--/////////////////////////////////////////////// Filter div /////////////////////////////////////////////////////-->

                <div class="filter">


                    <span class="filter_heading">Select Brands</span>
                    <a href="" class="clear" id="clear_brands">Clear<a>

                    <div class="brand_div">
                        <?php 
                            show_brands(); 
                        ?>
                    </div>

                    <div class="price_div">

                    </div>
                </div>

<!--/////////////////////////////////////////////// List div ///////////////////////////////////////////////////////-->

                <div class="list">
                    <div class="loading">
                        <img src="images/loadingAnimation.gif">
                    </div>
                    <?php
                        show_filtered();
                     ?>
                </div>
            </div>


            <div class="footer">
                FOOTER
            </div>
        </div>
    </div>


<?php


?>
<script type="text/javascript">

    $(window).on('load', function(){

        function filter(){
            //alert("filter called");

            $('.filter .list').css('opacity', 0.5);
            $('.loading').css('visibility', 'visible');

            var brandchoice = new Array();
            $('input[name="brandchoice"]:checked').each(function(){
                brandchoice.push($(this).val());
                $('#clear_brands').css('visibility', 'visible');
            });
            if(brandchoice==""){
                $('#clear_brands').css('visibility', 'hidden');
            }
            var brand_list = '&brand_list='+brandchoice;


            var data = brand_list.substring(1, brand_list.length);
            //alert(data);

            $.ajax({
                url: "list.php",
                type: "GET",
                data: data,
                cache: false,
                success: function(result){

                    $(".filter .list").css("opacity", 1);
                    $(".loading").css("visibility", "hidden");
                },
                error: function(jqxhr, exception){
                    console.log(jqxhr);
                },
                beforeSend: function(){
                    console.log("before send: "+data); //This is showing "brand_list=1" which is correct.
                }
            });

        }

        $('input[type="checkbox"]').on('change', filter);

        $('#clear_brands').on('click', function(){
            $('.brand_check').removeAttr('checked');
            filter();
            $('#clear_brands').css('visibility', 'hidden');
        });


    }); //end of jquery

</script>
</body>
</html>

我在ajax请求的beforeSend中使用alert（），它会按预期返回正确的数据。但是页面的PHP部分没有收到值。 PHP端或浏览器调试窗口没有错误。

Answer 1

在Chrome中，执行 Ctrl + Shift + I 打开开发人员工具，然后检查控制台是否有错误，然后选择网络标签查看数据是否为通过请求。

Answer 2

我逐行检查了你的代码。并确定你在名为＆＃34; filter＆＃34;的函数中有ajax代码。 function filter()。

现在，您要通过ID为onclick

的元素的clear_brands事件调用此过滤器函数

$('#clear_brands').on('click', function(){
    $('.brand_check').removeAttr('checked');
          filter();
     $('#clear_brands').css('visibility', 'hidden');
});

通过这段代码，我知道最后你的ajax调用没有被发出，因为你没有触发click事件，

因此，您应该在文档上触发此事件，或者您必须通过单击该元素来执行此操作。

只要考虑一下这个流程。

我正在我的本地测试你的脚本通过一些修改，我已经使它发挥作用。

做了一些改变，比如

在脚本的最后我刚才推出了这段代码。

$(document).ready(function(){
     $('#clear_brands').trigger("click");
});

执行了ajax调用..

查看我的整个HTML

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
        <a href="" class="clear" id="clear_brands">Clear<a>
        <script type="text/javascript">

            $(window).on('load', function(){

                function filter(){
                    //alert("filter called");

                    $('.filter .list').css('opacity', 0.5);
                    $('.loading').css('visibility', 'visible');

                    var brandchoice = new Array();
                    $('input[name="brandchoice"]:checked').each(function(){
                        brandchoice.push($(this).val());
                        $('#clear_brands').css('visibility', 'visible');
                    });
                    if(brandchoice==""){
                        $('#clear_brands').css('visibility', 'hidden');
                    }
                    var brand_list = '&brand_list='+brandchoice;


                    var data = brand_list.substring(1, brand_list.length);
                    //alert(data);

                    $.ajax({
                        url: "list.php",
                        type: "GET",
                        data: data,
                        cache: false,
                        success: function(result){

                            $(".filter .list").css("opacity", 1);
                            $(".loading").css("visibility", "hidden");
                        },
                        error: function(jqxhr, exception){
                            console.log(jqxhr);
                        },
                        beforeSend: function(){
                            console.log("before send: "+data); //This is showing "brand_list=1" which is correct.
                        }
                    });

                }

                $('input[type="checkbox"]').on('change', filter);

                $('#clear_brands').on('click', function(){
                    $('.brand_check').removeAttr('checked');
                    filter();
                    $('#clear_brands').css('visibility', 'hidden');
                });


            }); //end of jquery

            $(document).ready(function(){
                    $('#clear_brands').trigger("click");
            });
        </script>
    </body>
</html>

对同一PHP页面的Ajax请求不会产生任何错误但不起作用

2 个答案: