jQuery AJAX/PHP/MySQL现场过滤

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

我应用的逻辑是：选择一个过滤条件，单击一个单选按钮。通过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

来源

2011-04-26 frishi

Frishi，请自我介绍[Bobby Tables]（http://xkcd.com/327/）。 – awm 2011-04-26 15:08:02

你用这个SQL抓回了多少条记录？你有没有想过分页说10-20 ...我怀疑这是问题所在。你必须要求许多图像，这可能是瓶颈？ – diagonalbatman 2011-04-26 15:09:53

谢谢diagonalbatman。客户希望显示一切。我想这个问题更多的是：一旦我做了一个查询，生成一个结果集，当我应用第二个过滤器时，如何操作相同的结果集？ – frishi 2011-04-26 15:14:05

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

来源

2011-04-26 15:12:40 Galen

谢谢！我看到我的逻辑出了什么问题。我会记得在我有15个声望时投票给你。 – frishi 2011-04-26 15:20:45

jQuery AJAX/PHP/MySQL现场过滤

回答

相关问题