Поисковая система MySQL/PHP - без обновления? Приведенные примеры и документы

Question

Мой вопрос довольно длительный, поэтому я получу право на это. У меня есть поисковая система, которая отправляет данные (метод GET) в php-скрипт, который запрашивает базу данных MySQL, а затем отображает результаты. Вы можете просмотреть проект, чтобы лучше понять, здесь: http://www.quinterest.org/testcategory/

Форма состоит из окна поиска и нескольких вариантов выбора, которые сужают поиск.

Все, что работает замечательно, но есть одна вещь, которую я хотел бы изменить, и я не знаю, как это сделать. Если кто-то может объяснить, что мне нужно сделать, чтобы показать результаты (я полагаю, что это будет в div, написанном в HTML?) Из запроса на той же странице, что и исходная форма, без необходимости обновите страницу?

Если вы хотите, например, один: http://quizbowldb.com/search Поиск остается на этой же странице.

P.S. Я знаю, что функции mysql_ устарели. Пожалуйста, не преследуйте меня. Я все очень новичок в этом, и функции mysql_ просты, легки и хороши для того, что мне нужно. Когда я получаю дополнительный опыт программирования (я все еще в средней школе), я могу преобразовать его в PDO или MySQLi.

HTML форма:

<form action='search.php' method='GET' class="form-search"> 
    <input type='text' placeholder="What would you like to learn about?" class="input-xxlarge search-query" id="inputInfo" name='search'><br></br> 
    <input type='submit' class="btn btn-large btn-primary" name='submit' value='Search'></br> 
    <select multiple="multiple" name='category[]'> 
     <option value="%">All</option> 
     <option>Literature</option> 
     <option>History</option> 
     <option>Science</option> 
     <option>Fine Arts</option> 
     <option>Trash</option> 
     <option>Mythology</option> 
     <option>Phylosophy</option> 
     <option>Social Science</option> 
     <option>Religion</option> 
     <option>Geography</option> 
    </select> 
    </center> 
</form> 

search.php

<?php 

$button = $_GET ['submit']; 
$search = $_GET ['search']; 

print $search; 



//validating search term length and connecting to db 
if(strlen($search)<=1) 
echo "Search term too short"; 
else{ 
echo "You searched for <b><em>$search</em></b> and "; 
mysql_connect("fake","fake","fake"); 
mysql_select_db("quinterestdb");} 


//validating search term for protection; if statement to avoid errors being displayed 
if (strlen($search)>1){ 
mysql_real_escape_string($search);} 


//exploding search with multiple words 
$search_exploded = explode (" ", $search); //creates array of all terms in search 
foreach($search_exploded as $search_each) //loops through array 
{ 
$x++; 
if($x==1) 
$construct .="Answer LIKE '%$search_each%'"; //if only one value in array 
else 
$construct .="AND Answer LIKE '%$search_each%'"; //for each multiple value in array 




} 
$cat = $_GET ['category']; //preparing array (multiple choices) 
if (is_array($cat)) 
{ 
foreach($cat as $val) // 
{ 
if($val=="%") //if no category is selected 
continue; 
else //split array choices (separated by ' and ,) 
$comma_separated = implode("','", $cat); 
$newvar = "AND Category IN('$comma_separated')"; //if category is chosen 
} 
} //ignore for now 


$constructs ="SELECT * FROM tossupsdb WHERE $construct $newvar"; //completed search query 





//quering the database; if statement to avoid errors being displayed 
if (strlen($search)>1){ 
$run = mysql_query($constructs);} 

print "$constructs"; //ignore for now 



//number of results found; if statement to avoid errors being displayed 
if (strlen($search)>1){ 
$foundnum = mysql_num_rows($run);} 

if ($foundnum==0) 
echo "Sorry, there are no matching result for <b>$search</b>.</br></br>1. 
Try more general words. for example: If you want to search 'how to create a website' 
then use general keyword like 'create' 'website'</br>2. Try different words with similar 
meaning</br>3. Please check your spelling"; 
else 
{ 
echo " <span class='badge badge-info'> $foundnum </span> results were found:<hr  size='5'>"; 

$per_page = 25; //preparing for pagination; results that appear per page 
$start = $_POST['start']; //where to start results on page 
$max_pages = ceil($foundnum/$per_page); //number of pages there will be 
if(!$start) //starting at 0 
$start=0; 
$getquery = mysql_query("SELECT * FROM tossupsdb WHERE $construct $newvar LIMIT $start,  $per_page"); 

while($runrows = mysql_fetch_array($getquery)) //fetching results 
{ 
$answer = $runrows ['Answer']; //obtaining individual data from database 
$category = $runrows ['Category']; //obtaining individual data from database 
$num = $runrows ['Question #']; //obtaining individual data from database 
$difficulty = $runrows ['Difficulty']; //obtaining individual data from database 
$question = $runrows ['Question']; //obtaining individual data from database 
$round = $runrows ['Round']; //obtaining individual data from database 
$tournament = $runrows ['Tournament']; //obtaining individual data from database 
$year = $runrows ['Year']; //obtaining individual data from database 

//what will be displayed on the results page 
echo "<div class='alert alert-info' style='border-radius: 20px'><div style='padding: 10px'> 
<span class='label label-info' font-size='30px'><em>Tournament | Year | Round | Question # | Category</em></span></div> 
<b>$tournament |</b> <b>$year |</b> <b>$round |</b> <b>$num |</b> <b>$category</b> 
<p><em>Question:</em> $question</p> 
<div class='alert alert-info'><em><strong>ANSWER:</strong></em> $answer</div></div><hr> 
"; 

} 


    //Pagination Starts 
    echo "<center>"; 

$prev = $start - $per_page; 
$next = $start + $per_page; 

$adjacents = 3; 
$last = $max_pages - 1; 

if($max_pages > 1) 
{ 
//previous button 
if (!($start<=0)) 
echo " <a class='btn btn-primary btn-large' href='search.php?search=$search&submit=Search+source+code&start=$prev'>Prev</a> ";  

//pages 
if ($max_pages < 7 + ($adjacents * 2)) //not enough pages to bother breaking it up 
{ 
$i = 0; 
for ($counter = 1; $counter <= $max_pages; $counter++) 
{ 
if ($i == $start){ 
echo " <a class='btn' href='search.php?search=$search&submit=Search+source+code&start=$i'><b>$counter</b></a> "; 
} 
else { 
echo " <a class='btn' href='search.php?search=$search&submit=Search+source+code&start=$i'>$counter</a> "; 
} 
$i = $i + $per_page;     
} 
} 
elseif($max_pages > 5 + ($adjacents * 2)) //enough pages to hide some 
{ 
//close to beginning; only hide later pages 
if(($start/$per_page) < 1 + ($adjacents * 2))   
{ 
$i = 0; 
for ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++) 
{ 
if ($i == $start){ 
echo " <a class='btn' href='search.php?search=$search&submit=Search+source+code&start=$i'><b>$counter</b></a> "; 
} 
else { 
echo " <a class='btn' href='search.php?search=$search&submit=Search+source+code&start=$i'>$counter</a> "; 
} 
$i = $i + $per_page;          
} 

} 
//in middle; hide some front and some back 
elseif($max_pages - ($adjacents * 2) > ($start/$per_page) && ($start/$per_page) > ($adjacents * 2)) 
{ 
echo " <a class='btn' href='search.php?search=$search&submit=Search+source+code&start=0'>1</a> "; 
echo " <a class='btn' href='search.php?search=$search&submit=Search+source+code&start=$per_page'>2</a> .... "; 

$i = $start;     
for ($counter = ($start/$per_page)+1; $counter < ($start/$per_page) + $adjacents + 2; $counter++) 
{ 
if ($i == $start){ 
echo " <a class='btn' href='search.php?search=$search&submit=Search+source+code&start=$i'><b>$counter</b></a> "; 
} 
else { 
echo " <a class='btn' href='search.php?search=$search&submit=Search+source+code&start=$i'>$counter</a> "; 
} 
$i = $i + $per_page;     
} 

} 
//close to end; only hide early pages 
else 
{ 
echo " <a class='btn' href='search.php?search=$search&submit=Search+source+code&start=0'>1</a> "; 
echo " <a class='btn' href='search.php?search=$search&submit=Search+source+code&start=$per_page'>2</a> .... "; 

$i = $start;     
for ($counter = ($start/$per_page) + 1; $counter <= $max_pages; $counter++) 
{ 
if ($i == $start){ 
echo " <a class='btn' href='search.php?search=$search&submit=Search+source+code&start=$i'><b>$counter</b></a> "; 
} 
else { 
echo " <a class='btn' href='search.php?search=$search&submit=Search+source+code&start=$i'>$counter</a> "; 
} 
$i = $i + $per_page;    
} 
} 
} 

//next button 
if (!($start >=$foundnum-$per_page)) 
echo " <a class='btn btn-primary btn-large' href='search.php?search=$search&submit=Search+source+code&start=$next'>Next</a> ";  
} 
echo "</center>"; 
} 

?> 

Answer 1

Вы должны использовать AJAX, чтобы сделать это. Используя AJAX, вы отправляете асинхронные запросы (запросы без загрузки страницы) на сервер.

Как работают Google и другие крупные поисковые системы. Подробнее об этом здесь: Ajax tutorial

Ajax - Asynchronous JavaScript And XML

От Wikipedia definition of Ajax:

С Ajax, веб-приложения могут передавать данные в и извлекать данные из, сервер асинхронно (в фоновом режиме), не мешая отображение и поведение существующей страницы.

Данные могут быть получены с использованием объекта XMLHttpRequest.

Несмотря на название, использование XML не требуется (JSON часто используется вместо этого), и запросы не обязательно должны быть асинхронными.

Answer 2

простейший способ сделать это, вероятно, с помощью JQuery, в рамках JavaScript; на «простой», я имею в виду наименьшую работу на вашем конце:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script> 
    // This is the equivalent of the older $(document).ready() event 
    $(function(){ 
     $('#search-form').on('submit', function(event){ 

      event.preventDefault(); // prevents form submission 

      var data = $('#search-form').serialize(); // get all of the input variables in a neat little package 
      var action = $('#search-form').attr('action'); // get the page to get/post to 

      $.get(action, data, function(response, status, jqxhr){ 

       $('#target').html(response); 

      }); 
     }); 
    }); 
</script> 

Здесь я добавить id в форму, так что я могу непосредственно предназначаться его. Я также предполагаю, что есть элемент HTML с idtarget, который я могу вставить с ответом HTML (который я также предполагаю только фрагмент).