使用AJAX實現搜索使用AJAX php mysql

Question

嘿夥計我試圖在網站中使用AJAX，PHP，MySQL，jQuery實現搜索功能。現在我的應用程序工作正常，當我去一個列表頁面（頁面在網站上的項目列表）。但我有一個索引頁面的搜索結果必須顯示在列表頁面上。基本分頁使用php完成，適用於來自菜單的鏈接，但無法搜索。（即如果使用搜索查詢索引頁面重定向它不工作）

搜索文本框：

 <form name="homePageSearchForm" method="post" action="cities.php" autocomplete="off"> 
       <!-- <input type="hidden" value="e.g kolte patil life republic, wagholi pune" id="hiddenExData" name="hiddenExData">--> 
        <div style="padding-top:5px; line-height:20px; width:280px;" class="flt"> 
        <div class="flt"><strong>Locality, City, Builder or Project name</strong><span style="color:#FF3300;">*</span><br> 
        <div class="flt"><input type="text" onBlur="if(this.value=='') this.value='e.g kolte patil life republic, wagholi pune';" onFocus="if(this.value=='e.g kolte patil life republic, wagholi pune') this.value='';" value="e.g kolte patil life republic, wagholi pune" name="SearchValue" id="searchId" title="Search" class="headerinput ac_input" autocomplete="off"> 

列表頁面DIV其中的內容有顯示。

  <div class="flt width710" id="displayProp"> 
      <div style="margin-top:10px;" class="flt mapnewalert"> <?php //echo ucfirst($_SESSION['$city']) ?></div> 
      <div style="float:right" id="toppagesel"> 
      <?php 
        echo $pages->display_pages(); 
        echo $pages->display_items_per_page(); 
       /* if(isset($localitySearch) && $localitySearch!='' && isset($citySearch) && $citySearch!='') 
        { 
         $query = "SELECT * from properties inner join cities on properties.city_id=cities.city_id inner join locality on properties.locality_id=locality.locality_id where (cities.city_name like '%".$citySearch."%' and locality.locality_name like '%".$localitySearch."%') and (property_price_min between '78 Lacs' and '80 Lacs') $pages->limit"; 
        }*/ 

       // else 
       // { 
        $query = "SELECT * from properties,locality,cities where properties.city_id='".$_SESSION['$cityId']."' and properties.locality_id=locality.locality_id and properties.city_id=cities.city_id $pages->limit"; 
       // } 

       // echo $query; 
        $result = mysql_query($query) or die(mysql_error()); 

        //$getProperty = $propertyDetails->getPropertyDetailsByCityIdPaginate($_SESSION['$cityId'],$limit); 
      ?> 
      <?php //echo $pages->display_pages(); ?><?php //echo $pages->display_items_per_page();?> 
      </div> 
     </div> 

現在就點擊搜索按鈕，我調用JavaScript函數如下

    <input type="submit" onClick="**handleHomePageSearch(0,'e')**;return false;" value="SEARCH" class="hpnewsubmitbtn"> 

的js函數：

   function handleHomePageSearch(buttonEle,e) { 
      var criteria = document.getElementById("searchCriteria").value; 
      var searchVal = document.getElementById("searchId").value; 
      xmlHttpSearchct=GetXmlHttpObject(); 
      var cur_page = document.getElementById("current_page").innerHTML; 

      var url="fetchCity.php?&searchVal="+searchVal+"&buttonEle="+buttonEle+"&cur_page="+cur_page; 
      alert(url); 
      xmlHttpSearchct.open("GET",url,false); 

      xmlHttpSearchct.send(null); 

          var Searchres=xmlHttpSearchct.responseText; 
         **//To get the response** 
         xmlhttp.onreadystatechange=function() 
      { 
       if (xmlhttp.readyState==4 && xmlhttp.status==200) 
       { 
            document.getElementById('displayProp').innerHTML=Searchres; 
       } 
      } 

這使反應早在HTML的形式，但我無法在列表（properties.php）頁面上顯示它。如果我使用搜索值，則分頁不起作用。

fetchCity.php包含查詢和HTML返回的數據。

    $searchValue= $_GET['searchVal']; 
$buttonEle = $_GET['buttonEle']; 
$current_page=$_GET['cur_page']; 

    $locCity = explode(" ",$searchValue); 
    $localitySearch = $locCity[0]; 
    $citySearch  = $locCity[1]; 

     $query = "SELECT * from properties inner join cities on properties.city_id=cities.city_id inner join locality on properties.locality_id=locality.locality_id where (cities.city_name like '%".$citySearch."%' and locality.locality_name like '%".$localitySearch."%') and (property_price_min between '78 Lacs' and '80 Lacs') $pages->limit"; 
    //echo $query; 
    exit; 
    $result = mysql_query($query) or die(mysql_error()); 


?> 


<div class="width710" id="displayProp"> 

    <?php 


/*print_r($getProperty); 
foreach($result as $property)*/ 
while($row=mysql_fetch_assoc($result)) 
{ 
     ?> 
      <div class="projectlisttiger">  
      <div class="proptigerhead">PropTiger Recommends</div> 
       <div class="spacer5">&nbsp;</div> 
       <div class="listnewimg flt"> 
        <a href="p-kolte-patil-cilantro-wagholi-pune.php"> 
         <img src="admin/uploads/<?php echo ($row['property_cover_image']) ?>" width="186" height="125" border="0"> 
         <img src="admin/uploads/Cilantra1/1cilantra-large.jpg" width="186" height="125" border="0"> 
        </a> 
        <div class="newlistlaunch"><a href="p-kolte-patil-cilantro-wagholi-pune.php"><img width="65" height="65" border="0" src="images/projects/kolte-patil/cilantra/new_launch_blue.png"></a> 
        </div>        
       </div> 

       <div class="listright"> 
        <div style="width:498px; height:42px;" class="flt"> 
         <div class="list-logo flt"> 
          <div class="buildborder"><a href="p-kolte-patil-cilantro-wagholi-pune.php"><img width="80" height="36" border="0" align="absmiddle" alt="Kolte Patil" src="admin/uploads/<?php echo $row['builder_logo']?>"></a> 
          </div> 
           <div class="tablistname"><a href="p-kolte-patil-cilantro-wagholi-pune.php"><?php echo $row['property_name'] ?></a></div> 
         </div> 
         <?php if ($row['property_price_min']!=0) { ?>  
         <div class="listprice"> 
          <img width="18" height="18" align="absmiddle" src="images/city/rupee_icon.gif"> <?php echo $row['property_price_min'] ?> Lacs - <?php echo $row['property_price_max'] ?> Lacs  
         </div> 
         <?php } else { ?> 
         <div class="listprice"> 
          <img width="18" height="18" align="absmiddle" src="images/city/rupee_icon.gif">Price on Request 
         </div> 
         <?php } ?> 

        </div> 

         <div class="spacer3">&nbsp;</div>  SPACER 

        <div class="listbox"> 
         <a href="p-kolte-patil-cilantro-wagholi-pune.php"><strong>Address</strong>:<?php echo $row['locality_name'] ?>, <?php echo $row['city_name'] ?><br> <strong>Types</strong>: 2BHK &amp; 3BHK 
         <br><strong>Sizes:</strong> <?php echo $row['property_size_min'] ?> sqft - <?php echo $row['property_size_max'] ?> sqft </a> 
        </div> 

        <div style="margin-left:-3px;" class="flt"> 
         <div style="width:110px;" class="flt"><a style="text-decoration:none;" href="p-kolte-patil-cilantro-wagholi-pune.php"><input type="button" value="View Details" class="detail_project"></a> 
         </div>  
         <div style="width:110px;" class="flt"><input type="button" onClick="showEnqForm('2659','Cilantro'); return false;" value="Enquire Now" class="enquire_project"></div> 
        </div> 
          <div class="spacer">&nbsp;</div>  SPACER         
       </div> 
       <div class="spacer15">&nbsp;</div>     SPACER 
     </div>    

    <?php } 
    exit; 

    // echo "<p class=\"paginate\">Page: $pages->current_page of $pages->num_pages</p>\n"; 
    ?>       

     <div class="spacer15">&nbsp;</div> 
     </div> 

我想知道的是，我的做法吧??我怎麼能顯示與分頁工作的其他頁面上的搜索結果。

僅供參考，我將添加具有類似功能的參考站點的鏈接。

它是這樣的：http://www.proptiger.com/ 任何形式的建議或幫助，將不勝感激。
分頁類：

  class Paginator{ 
var $items_per_page; 
var $items_total; 
var $current_page; 
var $num_pages; 
var $mid_range; 
var $low; 
var $limit; 
var $return; 
var $default_ipp; 
var $querystring; 
var $ipp_array; 

function Paginator() 
{ 
    $this->current_page = 1; 
    $this->mid_range = 2; 
    $this->ipp_array = array(2,4,6,8,10,'All'); 
    $this->items_per_page = (!empty($_GET['ipp'])) ? $_GET['ipp']:$this->default_ipp; 
} 

function paginate() 
{ 
    if(!isset($this->default_ipp)) $this->default_ipp='10'; 
    if($_GET['ipp'] == 'All') 
    { 
     $this->num_pages = 1; 
      //$this->items_per_page = $this->default_ipp; 
    } 
    else 
    { 
     if(!is_numeric($this->items_per_page) OR $this->items_per_page <= 0) $this->items_per_page = $this->default_ipp; 
     $this->num_pages = ceil($this->items_total/$this->items_per_page); 
    } 
    $this->current_page = (isset($_GET['page'])) ? (int) $_GET['page'] : 1 ; // must be numeric > 0 
    $prev_page = $this->current_page-1; 
    $next_page = $this->current_page+1; 
    if($_GET) 
    { 
     $args = explode("&",$_SERVER['QUERY_STRING']); 
     foreach($args as $arg) 
     { 
      $keyval = explode("=",$arg); 
      if($keyval[0] != "page" And $keyval[0] != "ipp") $this->querystring .= "&" . $arg; 
     } 
    } 

    if($_POST) 
    { 
     foreach($_POST as $key=>$val) 
     { 
      if($key != "page" And $key != "ipp") $this->querystring .= "&$key=$val"; 
     } 
    } 
    if($this->num_pages > 4) 
    { 
     $this->return = ($this->current_page > 1 And $this->items_total >= 10) ? "<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=$prev_page&ipp=$this->items_per_page$this->querystring\">&laquo; Previous</a> ":"<span class=\"inactive\" href=\"#\">&laquo; Previous</span> "; 

     $this->start_range = $this->current_page - floor($this->mid_range/2); 
     $this->end_range = $this->current_page + floor($this->mid_range/2); 

     if($this->start_range <= 0) 
     { 
      $this->end_range += abs($this->start_range)+1; 
      $this->start_range = 1; 
     } 
     if($this->end_range > $this->num_pages) 
     { 
      $this->start_range -= $this->end_range-$this->num_pages; 
      $this->end_range = $this->num_pages; 
     } 
     $this->range = range($this->start_range,$this->end_range); 

     for($i=1;$i<=$this->num_pages;$i++) 
     { 
      if($this->range[0] > 2 And $i == $this->range[0]) $this->return .= " ... "; 
      // loop through all pages. if first, last, or in range, display 
      if($i==1 Or $i==$this->num_pages Or in_array($i,$this->range)) 
      { 
       $this->return .= ($i == $this->current_page And $_GET['page'] != 'All') ? "<a title=\"Go to page $i of $this->num_pages\" class=\"current\" href=\"#\">$i</a> ":"<a class=\"paginate\" title=\"Go to page $i of $this->num_pages\" href=\"$_SERVER[PHP_SELF]?page=$i&ipp=$this->items_per_page$this->querystring\">$i</a> "; 
      } 
      if($this->range[$this->mid_range-1] < $this->num_pages-1 And $i == $this->range[$this->mid_range-1]) $this->return .= " ... "; 
     } 
     $this->return .= (($this->current_page < $this->num_pages And $this->items_total >= 10) And ($_GET['page'] != 'All') And $this->current_page > 0) ? "<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=$next_page&ipp=$this->items_per_page$this->querystring\">Next &raquo;</a>\n":"<span class=\"inactive\" href=\"#\">&raquo; Next</span>\n"; 
     $this->return .= ($_GET['page'] == 'All') ? "<a class=\"current\" style=\"margin-left:10px\" href=\"#\">All</a> \n":"<a class=\"paginate\" style=\"margin-left:10px\" href=\"$_SERVER[PHP_SELF]?page=1&ipp=All$this->querystring\">All</a> \n"; 
    } 
    else 
    { 
     for($i=1;$i<=$this->num_pages;$i++) 
     { 
      $this->return .= ($i == $this->current_page) ? "<a class=\"current\" href=\"#\">$i</a> ":"<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=$i&ipp=$this->items_per_page$this->querystring\">$i</a> "; 
     } 
     $this->return .= "<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=1&ipp=All$this->querystring\">All</a> \n"; 
    } 
    $this->low = ($this->current_page <= 0) ? 0:($this->current_page-1) * $this->items_per_page; 
    if($this->current_page <= 0) $this->items_per_page = 0; 
    $this->limit = ($_GET['ipp'] == 'All') ? "":" LIMIT $this->low,$this->items_per_page"; 
} 
function display_items_per_page() 
{ 
    $items = ''; 
    if(!isset($_GET[ipp])) $this->items_per_page = $this->default_ipp; 
    foreach($this->ipp_array as $ipp_opt) $items .= ($ipp_opt == $this->items_per_page) ? "<option selected value=\"$ipp_opt\">$ipp_opt</option>\n":"<option value=\"$ipp_opt\">$ipp_opt</option>\n"; 
    return "<span class=\"paginate\">Items per page:</span><select class=\"paginate\" onchange=\"window.location='$_SERVER[PHP_SELF]?page=1&ipp='+this[this.selectedIndex].value+'$this->querystring';return false\">$items</select>\n"; 
} 
function display_jump_menu() 
{ 
    for($i=1;$i<=$this->num_pages;$i++) 
    { 
     $option .= ($i==$this->current_page) ? "<option value=\"$i\" selected>$i</option>\n":"<option value=\"$i\">$i</option>\n"; 
    } 
    return "<span class=\"paginate\">Page:</span><select class=\"paginate\" onchange=\"window.location='$_SERVER[PHP_SELF]?page='+this[this.selectedIndex].value+'&ipp=$this->items_per_page$this->querystring';return false\">$option</select>\n"; 
} 
function display_pages() 
{ 
    return $this->return; 
} 

}

感謝

Answer 1

$(document).ready(function() { 
    $('.paginate').live('click', function (e) { 
     e.preventDefault(); 
     var btnPage = $(this); 
     $.ajax({ 
      url: btnPage.attr('href'), 
      success: function (resp) { 
       // replace current results with new results. 
       $('#project_section').html(resp); 
      }, 
      error: function() { 
       window.location.href = btnPage.attr('href'); 
      } 
     }); 
    }); 
}); 

這裏$（ 「拼版」）是類的<li>在我的paginator分類秒。我得到了答案here謝謝

Answer 2

讓你的js funcion這樣

function handleHomePageSearch(buttonEle, e) { 
    var criteria = document.getElementById("searchCriteria").value; 
    var searchVal = document.getElementById("searchId").value; 
    xmlHttpSearchct = new XMLHttpRequest(); 
    var cur_page = document.getElementById("current_page").innerHTML; 

    var url = "fetchCity.php?&searchVal=" + searchVal + "&buttonEle=" + buttonEle + "&cur_page=" + cur_page; 
    alert(url); 

    xmlHttpSearchct.onreadystatechange = function() { 
     if (xmlHttpSearchct.readyState == 4 && xmlHttpSearchct.status == 200) { 
      document.getElementById('displayProp').innerHTML = xmlHttpSearchct.responseText; 
     } 
    } 
    xmlHttpSearchct.open("GET", url, false); 
    xmlHttpSearchct.send(null); 
}