堆棧內存溢出
  簡體   English   中英

在一個PHP頁面中使用Ajax在搜索功能后加載數據

[英]Load data after search function using ajax in one php page

 原文  2014-10-14 10:09:50  4   2    javascript/ php/ html/ ajax/ pagination

問題描述

我是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。

2 個解決方案

解決方案1
 1  2014-10-14 12:45:00

試試這個：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";

解決方案2
 0  2014-10-14 10:26:32

為什么不嘗試使用此http://www.datatables.net/examples/styling/jqueryUI.html ？

它對我很有用，並且實現了許多功能，例如即時搜索，您一定會喜歡

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用AJAX在PHP / HTML頁面上進行搜索的功能 在php頁面加載后使用Ajax動態呈現表值 使用ajax將數據從一個PHP頁面傳遞到另一頁面 調用javascript函數的AJAX加載PHP頁面 頁面加載ajax后使用JavaScrip獲取數據 Ajax請求和PHP函數后刷新頁面 Javascript +頁面加載AJAX函數+將Java變量傳遞給PHP 使用php和mysql的ajax搜索功能 當某些數據插入另一個php文件中時，使用ajax將內容加載到php頁面的div中 頁面加載后加載ajax
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM