在AJAX请求后重置DOM

时间:2012-12-28 10:50:10

标签: php javascript jquery ajax

我正在尝试在此网站上实现由AJAX请求驱动的搜索功能

http://polypodhub.com/ISL/

您可以注意到,当您开始输入输入时,AJAX调用开始获取文件名。因此,例如,如果您键入“S”,它将获取其中包含“S”的所有文件名。现在我遇到的问题是删除搜索查询后会发生什么。我想要发生的是伦敦类别下的表重新出现,但AJAX请求正在删除它。

在输入字段为空时,我想知道如何重置内容?

这是我的AJAX请求

<?php
$section='downloads';
$table="downloads";
$schoolSelectorTable="downloadsinschool";
$schoolSelector="downloads";
$folder="../../downloads/";


    $db_host = "localhost";
    $db_user = "root";
    $db_pass = "";
    $db_name = "isl";


mysql_connect($db_host, $db_user, $db_pass, $db_name);
mysql_select_db("isl") or die(mysql_error());

$partialStates = $_POST['partialState'];
$states = mysql_query("SELECT * FROM `downloads` LEFT JOIN `downloadsinschool` ON `downloads`.`id`=`downloadsinschool`.`downloads` WHERE `school` = 2 AND `title` LIKE '%$partialStates%'" );


if($_POST['partialState']){

while($state = mysql_fetch_array($states)){
    echo "<tr><td class='tlong'>".$state['title']."</td></tr>";
}
}

?>

这是包含搜索字段的表单:

<form style="background-color:;width:;" name="searchField">

<input type="text" name="search" class="downloadSearchBar" onkeyup = "getStatesLondon(this.value), getStatesSizeLondon(this.value), getStatesSurrey(this.value),getStatesSizeSurrey(this.value)" />
</form>

这是由数据库提供数据然后通过AJAX调用过滤的表:

    <?php
        //$query = "SELECT * FROM `downloads`, `downloadsinschool` WHERE `school` = '2'";
        $query = "SELECT * FROM `downloads` LEFT JOIN `downloadsinschool` ON `downloads`.`id`=`downloadsinschool`.`downloads`
        WHERE `school` = 2 ORDER BY DAT DESC";
        $result=$connection->query($query);

        echo '<table class="resultsLondon" style="float:left;margin-top:;margin-right:30px;">';
              // echo '<div class="resultsLondon"></div>';
            // echo'<tr><td class="resultsLondon" class="tlong"><a style="padding-left:5px;"></a></td>
            // <td class="resultsSizeLondon" style="width:px;overflow:hidden;"><a style="width:10px;overflow:hidden;" href="#"></a></td></tr>';
        while($row = $result->fetch_array()) {
            echo '<tr><td id="" class="tlong"><a style="padding-left:5px;" href="downloads/'.$row['filename'].'">'.$row['title'].'</a></td>
            <td style="width:px;overflow:hidden;"><a style="width:10px;overflow:hidden;" href="#">'.$row['filesize'].'</a></td></tr>';
          }
        echo '</table>';

    ?>

这是AJAX方法:

    function getStatesLondon(value){
    $.post("update/getStatesLondon.php", {partialState:value}, function(data){
      $(".resultsLondon").html(data);
    });
  }

1 个答案:

答案 0 :(得分:1)

如果partialState为空,则返回0。如果搜索字符串为空,则只需返回完整的结果集:

$partialStates = $_POST['partialState'];
$query = "SELECT * FROM `downloads` LEFT JOIN `downloadsinschool` ON `downloads`.`id`=`downloadsinschool`.`downloads` WHERE `school` = 2";
if ($partialStates) {
    $query += "AND `title` LIKE '%$partialStates%'"
}

$states = mysql_query($query);
while($state = mysql_fetch_array($states)){
    echo "<tr><td class='tlong'>".$state['title']."</td></tr>";
}