[英]Search function on PHP/HTML page using AJAX
描述 :嘗試使用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);
}
問題出在javascript。 分頁是由ajax響應給出的,似乎在某些情況下(或全部;我沒有研究過深的問題)將綁定到它們的元素動態添加到頁面后無法觸發javascript事件。 從jQuery 1.7開始不推薦使用live()方法。 現在起作用的是:
$('#container').on('click','.pagination li.active', function(){//... the ajax request here}
live()和on()之間的區別在於,您通常將事件綁定到的元素是on()方法的第二個參數,而on()方法是在該元素的父對象上調用的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.