php - MySQL/PHP 搜索引擎 - 没有刷新？提供的示例和文件

Question

我的问题比较长，所以我会直接回答。我设置了一个搜索引擎，它将数据（GET 方法）发送到一个查询 MySQL 数据库然后显示结果的 php 脚本。您可以在此处查看该项目，以获得更好的理解：http: //www.quinterest.org/testcategory/

该表单由一个搜索框和一个缩小搜索范围的多选选项组成。

一切都很好，但有一件事我想改变，我不知道怎么做。如果有人可以详细解释，我需要做什么才能在与原始表单相同的页面上的查询中显示结果（我认为它将在用 HTML 编写的 div 中？），而无需刷新页面？

如果您想要一个示例，这里有一个：http://quizbowldb.com/search 搜索停留在同一页面上。

PS 我知道 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>

搜索.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>";
} 

?>

score 0 · Accepted Answer

最简单的方法可能是通过 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 元素id，target我可以用响应 HTML 注入其中的一个（我也假设它只是一个片段）。

score 0 · Accepted Answer

您需要使用 AJAX 来做到这一点。使用 AJAX，您可以向服务器发送异步请求（不加载页面的请求）。

这就是谷歌和其他主要搜索引擎的工作方式。在这里了解它：Ajax 教程

Ajax - Asynchronous JavaScript And XML

来自Wikipedia 对 Ajax 的定义：

使用 Ajax，Web 应用程序可以异步（在后台）向服务器发送数据和从服务器检索数据，而不会干扰现有页面的显示和行为。

可以使用 XMLHttpRequest 对象检索数据。

尽管名称如此，但不需要使用 XML（通常使用 JSON 代替），并且请求不需要是异步的。

php - MySQL/PHP 搜索引擎 - 没有刷新？提供的示例和文件

2 回答 2

Related

Reference