Question

我正在建立一个图片库，您可以按城市，类别和性别过滤图片。我面临的问题是如何实时更新结果（实时）。

我申请的逻辑是：选择过滤条件，单击单选按钮。通过jQuery AJAX将查询发送到运行MySQL查询并返回HTML的PHP脚本。

它有效，但很笨重。一旦我选择了城市，我就必须选择性别，再选择城市以获得结果。

我知道问题在于我运行MySQL的方式。我需要你的指导。

gallery.php文件的代码：

 <html>

<head>
<title>EQUIMATIC GALLERY</title>    


<link rel="stylesheet" type="text/css" href="styles.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<script src="jcarousel.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jcarousel.css">
<script>

function displayFullImage(link)
{
    //alert(link);
    $("#currentlystaged").attr('src', link);
}

$(document).ready(function(){

    $('#thumbs').jcarousel({
        vertical: true,
        scroll: 13
    });

//first load
$.ajax({
    type:"POST",
    url:"sortbystate.php",
    data:"city=new york&gender=m&category=",
    success:function(data){

            //alert("whoa, careful there!");
            $('#thumbs').html(data);
    }


});//end ajax

  // normal operation
    $(".statelist :input").click(function(){

    var state = $('.statelist input:checked').attr('value');
    var gender = $('.gender input:checked').attr('value');
    var category =$('.category input:checked').attr('value');
        $.ajax({
            type:"POST",
            url:"sortbystate.php",
            data:"city="+state+"&gender="+gender+"&category="+category,
            success:function(data){

                    //alert("whoa, careful there!");
                    $('#thumbs').html(data);
            }


        });//end ajax
    });




});

</script>

</head>


<body>

<?php include 'conndb.php';?>


<div class="container">
<div class="sublogo"><img src="images/galogo.png"></div>
<div class="sidebaropen">
<div class="statelist">
SORT ENTRIES BY:<br/>


    <h2>01 LOCATION </h2>
    <input type="radio" value="New York" name="state" /> NYC <br>
    <input type="radio" value="Los Angeles" name="state" /> Los Angeles <br>
    <input type="radio" value="San Francisco" name="state" /> San Francisco <br>
    <input type="radio" value="Chicago" name="state" /> Chicago <br>
    <input type="radio" value="Miami" name="state" /> Miami <br>
    <input type="radio" value="Texas" name="state" /> Dallas <br>
    <input type="radio" value="District of Columbia" name="state" /> DC <br>
    <input type="radio" value="Boston" name="state" /> Boston <br>


    </div><!-- state list -->

    <div class="gender">
    <h2>02 GENDER </h2>
    <input type="radio" value="m" name="gender" /> Male <br>
    <input type="radio" value="f" name="gender" /> Female <br>
    </div>


    <div class="category">
    <h2>03 CATEGORY </h2>
    <input type="radio" value="balance" name="category" /> Balance <br>
    <input type="radio" value="confidence" name="category" /> Confidence <br>
    </div>


    </div>

    <div class="staging">
    <img src="http://www.byequinox.com/equinox_images/24447ddec24d22102eebf8a0a1d14e87.jpg" id="currentlystaged" /> 

    </div>

<div id="results">

<ul id=thumbs class='jcarousel jcarousel-skin-tango' style='width:250px; list-style:none; height:400px' >   

</ul>


</div>
</div>


</div>


</body>
</html>

按州分类的代码：

<?php
include "conndb.php";
$city = $_POST['city'];
$gender = $_POST['gender'];
$category = $_POST['category'];


 $filter_query= "SELECT * FROM  equinox where city LIKE CONVERT( _utf8 '$city' USING latin1 ) AND gender = '$gender'";




$filter_result = mysql_query($filter_query);

while($filter_row= mysql_fetch_array($filter_result))
{
    $link = $filter_row['link'];
    echo("<a href=# >");
    echo("<li style='width:60px; margin:0 10px 0 35px; float:left;'><img src=".$filter_row['link']." width=100 border=0  onclick=displayFullImage('$link'); > </a></li>");
    //echo($filter_result);
}




?>

实际工作画廊的链接：http://rjwcollective.com/equinox/rishi_gallery/eqgall.php

Answer 1

问题是，您只在选择城市时更新照片。将照片检索功能提取到自己的功能中，然后从所有3个无线电上的click事件中调用该功能

jQuery AJAX / PHP / MySQL实时过滤

1 个答案: