使用AJAX在PHP / HTML页面上搜索功能

Question

说明：尝试使用AJAX分页对PHP页面中的视频进行标题搜索。

问题：按下时“搜索”按钮不执行任何操作。相反，如果我在“关键字”字段中写入内容并从第1页切换到第2页，则日期会更新并显示具有匹配标题的视频。如果我删除我在“关键字”字段中写的内容，并在页面之间再次切换，则数据会更新。如上所述，“搜索”按钮不起作用。

修复：我想在文字字段中输入并按“搜索”按钮。然后，该页面应该更新并仅显示具有匹配标题的视频。

的search.php ：               

<!-- Testing the search -->
<p><b> Search all videos in database below: </b></p>
<ul>
    <li>
        <label for="keywords">Keywords</label>
        <input type="text" id="keywords" name="keywords" size="50" maxlength="64" />
    </li>
    <li>
        <input type="button" value="Search" onclick="loadData()" />
    </li>
</ul>

search_videos.js ： *'page'变量用于分页

...
function loadData(page){                   
    $.ajax
    ({
        type: "POST",
        url: "search_videos.php",
        data: { 'page': page, 'keywords': $('#keywords').val() },
        success: function(msg)
        {
            loading_hide();
            $("#container").html(msg);
        }
    });
}         
...

更新：在我按下第二页然后再按第一页后，我得到的是下面的内容。

POST结果：

原始结果（抱歉格式错误）：

005<div class='data' style='margin-bottom:10px'><ul><a href="view.php?id=0"><img src="images/link_pic.png" alt="error" width="164" height="128"></a><li>Title: <b>Video 1</b></br> Uploaded by: user1</br>Date added: 13/07/2013</li></br></br><a href="view.php?id=1"><img src="images/link_pic.png" alt="error" width="164" height="128"></a><li>Title: <b>ghg</b></br> Uploaded by: cacamaca</br>Date added: 21 Jul 2013 16:03</li></br></br><a href="view.php?id=2"><img src="images/link_pic.png" alt="error" width="164" height="128"></a><li>Title: <b>s</b></br> Uploaded by: cacamaca</br>Date added: 21 Jul 2013 16:23</li></br></br><a href="view.php?id=3"><img src="images/link_pic.png" alt="error" width="164" height="128"></a><li>Title: <b>s</b></br> Uploaded by: cacamaca</br>Date added: 21 Jul 2013 16:24</li></br></br><a href="view.php?id=4"><img src="images/link_pic.png" alt="error" width="164" height="128"></a><li>Title: <b>dg</b></br> Uploaded by: gdfgdf</br>Date added: data azi</li></br></br></ul></div><div class='pagination'><ul><li class='inactive'>Previous</li><li p='1' style='color:#fff;background-color:#006699;' class='active'>1</li><li p='2' class='active'>2</li><li p='2' class='active'>Next</li>

这是我现在按下搜索按钮时得到的结果：

这有点长，代码的第一部分应与问题相关。以下是代码：

search_videos.php：

<?php
if($_POST['page'])
{
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 5;
$previous_btn = true;
$next_btn = true;
$start = $page * $per_page;

include"core/database/connect.php";

// Get the input of the selected video
$input = $_POST['input'];
//$input = 'video';
echo $input;
echo $page;
echo $start;
echo $per_page;

// protect against sql injection and ignore multiple spaces in the input
$keywords = preg_split('#\s+#', mysql_real_escape_string($input));

// query the database by user input title
$by_title = "LOWER(`V_TITLE`) LIKE '%" . implode("%' OR `V_TITLE` Like '%", $keywords) . "%'";

$query_pag_data = "SELECT * from upload WHERE $by_title LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";

while ($row = mysql_fetch_array($result_pag_data)) {
    $msg .= '<a href="view.php?id=' . $row['V_ID'] . '"><img src="images/link_pic.png" alt="error" width="164" height="128"></a>' . '<li>Title: <b>' . $row['V_TITLE'] . '</b></br> Uploaded by: ' . $row['V_USERNAME'] . '</br>Date added: ' . $row['V_DATE'] . '</li></br></br>';
}

 $msg = "<div class='data' style='margin-bottom:10px'><ul>" . $msg . "</ul></div>"; // Content for Data

/* --------------------------------------------- */
$query_pag_num = "SELECT COUNT(*) AS count FROM upload";
$result_pag_num = mysql_query($query_pag_num);
$row = mysql_fetch_array($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);

/* ---------------Calculating the starting and endign values for the   loop----------------------------------- */
if ($cur_page >= 7) {
  $start_loop = $cur_page - 3;
  if ($no_of_paginations > $cur_page + 3)
      $end_loop = $cur_page + 3;
  else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
      $start_loop = $no_of_paginations - 6;
      $end_loop = $no_of_paginations;
  } else {
      $end_loop = $no_of_paginations;
  }
} else {
  $start_loop = 1;
  if ($no_of_paginations > 7)
      $end_loop = 7;
  else
      $end_loop = $no_of_paginations;
}
/*     ----------------------------------------------------------------------------------------------------------- */
$msg .= "<div class='pagination'><ul>";

// FOR ENABLING THE PREVIOUS BUTTON
if ($previous_btn && $cur_page > 1) {
   $pre = $cur_page - 1;
   $msg .= "<li p='$pre' class='active'>Previous</li>";
} else if ($previous_btn) {
   $msg .= "<li class='inactive'>Previous</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {

   if ($cur_page == $i)
       $msg .= "<li p='$i' style='color:#fff;background-color:#006699;' class='active'>{$i}</li>";
   else
       $msg .= "<li p='$i' class='active'>{$i}</li>";
}

 // TO ENABLE THE NEXT BUTTON
if ($next_btn && $cur_page < $no_of_paginations) {
   $nex = $cur_page + 1;
   $msg .= "<li p='$nex' class='active'>Next</li>";
} else if ($next_btn) {
   $msg .= "<li class='inactive'>Next</li>";
}

echo $msg;

// de-allocate memory that was used to store the query results returned by mysql_query(), improve performance
mysql_free_result($query_pag_data);
}

Answer 1

问题在于javascript。分页是由ajax响应给出的，似乎在某些情况下（或者所有;我没有深入研究这个问题）javascript事件在它们被绑定的元素被动态添加到页面之后无法触发。从jQuery 1.7开始，不推荐使用非常容易使用的live（）方法。现在有用的是：

$('#container').on('click','.pagination li.active', function(){//... the ajax request here}

live（）和on（）之间的区别在于，通常绑定事件的元素是on（）方法的第二个参数，而on（）方法是在元素的父元素上调用的。