我的问题相当冗长,所以我会正确的。我有一个搜索引擎设置,将数据(GET方法)发送到php脚本,该脚本查询MySQL数据库,然后显示结果。您可以在此处查看项目,以便更好地理解:http://www.quinterest.org/testcategory/
表单由搜索框和缩小搜索范围的多选选项组成。
一切都很美妙,但有一件事我想改变,我不知道如何。如果有人能够详细解释我需要做些什么才能在与原始表单相同的页面上显示结果(我认为它将在HTML中编写的div中?)而不需要刷新页面?
如果你想要一个例子,这里有一个: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>";
}
?>
答案 0 :(得分:0)
你需要使用AJAX来做到这一点。使用AJAX,您可以向服务器发送异步请求(不加载页面的请求)。
这就是Google和其他主要搜索引擎的工作方式。在此处了解详情:Ajax tutorial
Ajax - Asynchronous JavaScript And XML
来自Wikipedia definition of Ajax:
使用Ajax,Web应用程序可以异步(在后台)向服务器发送数据和从服务器检索数据,而不会干扰现有页面的显示和行为。
可以使用XMLHttpRequest对象检索数据。
尽管有名称,但不需要使用XML(通常使用JSON),并且请求不需要是异步的。
答案 1 :(得分:0)
最简单的方法可能是通过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
,以便我可以直接定位它。我还假设有一个id
target
的{{1}} HTML元素,我可以用响应HTML注入(我也假设它只是一个片段)。