我是ajax和php的新手。我创建了一个页面，它使用ajax加载数据。数据使用分页显示。问题是，我不知道如何将结果搜索加载回birds.php。
birds.php
<script type="text/javascript">
$(document).ready(function(){
function loading_show(){
$('#loading').html("<img src='../~ww319/images/loading.gif'/>").fadeIn('fast');
}
function loading_hide(){
$('#loading').fadeOut('fast');
}
function loadData(page){
loading_show();
var search = $('#search').val();
$.ajax
({
type: "POST",
url: "../~ww319/load_data.php",
data: "page="+page+"&search="+search,
success: function(msg)
{
$("#container").ajaxComplete(function(event, request, settings)
{
loading_hide();
$("#container").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#container .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
});
</script>
<div class="entry">
<form action="../~ww319/load_data.php" method="POST">
<fieldset>
<legend>Searching</legend><br />
<input type="text" id="search" name="search" />
<input type="submit" value="Search" onClick="loadData(1);" /><br /><br />
<input type="hidden" name="page" value="1" />
</fieldset>
</form>
<br />
<div id="loading"></div>
<div id="container">
<div class="data"></div>
<div class="pagination">
</div>
</div>
</div>
load_data.php//这是将数据加载到birds.php 的页面
<?php
if(isset($_POST['page']))
{
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 2;
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
include 'connect.php';
// Connect to server and select database.
mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");
if(isset($_POST['search'])){
$search = $_POST['search'];
$searchPar = '';
if(!empty($search)){
$searchPar = "WHERE (`species` LIKE '%".$search."%') OR (`location` LIKE '%".$search."%')";
}
$query = "SELECT * from birds $searchPar LIMIT $start, $per_page";
$result1 = mysql_query($query) or die('MySql Error' . mysql_error());
$msg = "";
if(mysql_num_rows($result1) > 0){
while($result = mysql_fetch_array($result1)){
$msg .= "<li><img src=".$result['imgThumb']."></li>";
}
$msg = "<div class='data'><ul>" . $msg . "</ul></div>"; // Content for Data
$query_pag_num = "SELECT COUNT(*) AS count FROM birds WHERE (`species` LIKE '%".$search."%') Or (`location` LIKE '%".$search."%')";
$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);
if ($cur_page >= 5) {
$start_loop = $cur_page - 2;
if ($no_of_paginations > $cur_page + 2)
$end_loop = $cur_page + 2;
else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 4) {
$start_loop = $no_of_paginations - 4;
$end_loop = $no_of_paginations;
} else {
$end_loop = $no_of_paginations;
}
} else {
$start_loop = 1;
if ($no_of_paginations > 5)
$end_loop = 5;
else
$end_loop = $no_of_paginations;
}
$msg .= "<div class='pagination'><ul>";
// FOR ENABLING THE FIRST BUTTON
if ($first_btn && $cur_page > 1) {
$msg .= "<li p='1' class='active'>First</li>";
} else if ($first_btn) {
$msg .= "<li p='1' class='inactive'>First</li>";
}
// 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:#983D3A;' 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>";
}
// TO ENABLE THE END BUTTON
if ($last_btn && $cur_page < $no_of_paginations) {
$msg .= "<li p='$no_of_paginations' class='active'>Last</li>";
} else if ($last_btn) {
$msg .= "<li p='$no_of_paginations' class='inactive'>Last</li>";
}
echo $msg;
}
else{ // if there is no matching rows do following
$msg .= "no results found.";
echo $msg;
}}
else{
$query_pag_data = "SELECT * from birds 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 .= "<li><img src=".$row['imgThumb']."></li>";
}
$msg = "<div class='data'><ul>" . $msg . "</ul></div>"; // Content for Data
/* --------------------------------------------- */
$query_pag_num = "SELECT COUNT(*) AS count FROM birds";
$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);
if ($cur_page >= 5) {
$start_loop = $cur_page - 2;
if ($no_of_paginations > $cur_page + 2)
$end_loop = $cur_page + 2;
else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 4) {
$start_loop = $no_of_paginations - 4;
$end_loop = $no_of_paginations;
} else {
$end_loop = $no_of_paginations;
}
} else {
$start_loop = 1;
if ($no_of_paginations > 5)
$end_loop = 5;
else
$end_loop = $no_of_paginations;
}
$msg .= "<div class='pagination'><ul>";
// FOR ENABLING THE FIRST BUTTON
if ($first_btn && $cur_page > 1) {
$msg .= "<li p='1' class='active'>First</li>";
} else if ($first_btn) {
$msg .= "<li p='1' class='inactive'>First</li>";
}
// 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:#983D3A;' 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>";
}
// TO ENABLE THE END BUTTON
if ($last_btn && $cur_page < $no_of_paginations) {
$msg .= "<li p='$no_of_paginations' class='active'>Last</li>";
} else if ($last_btn) {
$msg .= "<li p='$no_of_paginations' class='inactive'>Last</li>";
}
echo $msg;
}
}
搜索结果将显示在load_data.php上，而不是加载回birds.php。
试试这个：birds.php
<script type="text/javascript">
$(document).ready(function(){
function loading_show(){
$('#loading').html("<img src='../~ww319/images/loading.gif'/>").fadeIn('fast');
}
function loading_hide(){
$('#loading').fadeOut('fast');
}
function loadData(page){
loading_show();
var search = $('#search').val();
$.ajax
({
type: "POST",
url: "../~ww319/load_data.php",
data: "page="+page+"&search="+search,
success: function(msg)
{
$("#container").ajaxComplete(function(event, request, settings)
{
loading_hide();
$("#container").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#container .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
});
</script>
<div class="entry">
<form action="../~ww319/load_search.php" method="POST">
<fieldset>
<legend>Searching</legend><br />
<input type="text" name="search" id="search"/>
<input type="button" value="Search" onClick="loadData(<?php $_POST['page'] ?>);" /><br /><br />
</fieldset>
</form>
<br />
<div id="loading"></div>
<div id="container">
<div class="data"></div>
<div class="pagination">
</div>
</div>
</div>
您的搜索查询应该生成如下：
$searchPar = '';
if(!empty($search)){
$searchPar = "WHERE (`species` LIKE '%".$search."%') OR (`location` LIKE '%".$search."%')";
}
$query = "SELECT * from birds $searchPar LIMIT $start, $per_page";
为什么不试试这个http://www.datatables.net/examples/styling/jqueryUI.html？
它对我很有用，它实现了许多功能，比如即时搜索，你肯定会喜欢