提交搜索查询&获取搜索结果而不刷新 [英] Submit Search query & get Search result without refresh
问题描述
我想提交搜索查询表单&在同一页上重定向/重新加载/刷新 搜索结果。
I want to submit search query form & get search result without redirecting/reloading/refreshing on the same page.
我的内容是动态的，所以不能使用那些提交联系表单而不刷新成功回复页面。
My content is dynamic so can not use those "submit contact form without refreshing page which replies back on success".
推荐答案
要提交表单，从数据库中收集结果并将其呈现给用户而无需刷新页面，重定向或重新加载，您需要：
In order to submit a form, collect the results from the database and present them to the user without a page refresh, redirect or reloading, you need to:
-
使用Ajax将表单中的数据发布到php文件;
Use Ajax to Post the data from your form to a php file;
后台的文件将查询数据库并获取结果他收到的数据;
That file in background will query the database and obtain the results for the data that he as received;
使用查询结果，您需要将其注入页面中的html元素，该元素已准备好显示结果给用户;
With the query result, you will need to inject it inside an html element in your page that is ready to present the results to the user;
最后，您需要设置一些控件，让样式和文档工作流程顺利运行。
At last, you need to set some controlling stuff to let styles and document workflow run smoothly.
所以，说到这里，这是一个有效的例子：
我们有一个表人，字段年龄和字段name，我们将搜索年龄为32岁的人。接下来，我们将在 div 中显示他们的姓名和年龄表格粉红色背景和非常大的文字。
为了正确测试这个，我们将有一个灰色的页眉，正文和页脚！
So, having said that, here's an working example:
We have a table "persons" with a field "age" and a field "name" and we are going to search for persons with an age of 32. Next we will present their names and age inside a div with a table with pink background and a very large text.
To properly test this, we will have an header, body and footer with gray colors!
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="pt" dir="ltr">
<head>
<title>Search And Show Without Refresh</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<!-- JQUERY FROM GOOGLE API -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#lets_search").bind('submit',function() {
var value = $('#str').val();
$.post('db_query.php',{value:value}, function(data){
$("#search_results").html(data);
});
return false;
});
});
</script>
</head>
<body style="margin:0;padding:0px;width:100%;height:100%;background-color:#FFFFFF;">
<div style="width:1024px;margin:0 auto;height:100px;background-color:#f0f0f0;text-align:center;">
HEADER
</div>
<div style="width:1024px;margin:0 auto;height:568px;background-color:#f0f0f0;text-align:center;">
<form id="lets_search" action="" style="width:400px;margin:0 auto;text-align:left;">
Search:<input type="text" name="str" id="str">
<input type="submit" value="send" name="send" id="send">
</form>
<div id="search_results"></div>
</div>
<div style="width:1024px;margin:0 auto;height:100px;background-color:#f0f0f0;text-align:center;">
FOOTER
</div>
</body>
</html>
db_query.php
<?php
define("HOST", "localhost");
// Database user
define("DBUSER", "username");
// Database password
define("PASS", "password");
// Database name
define("DB", "database_name");
// Database Error - User Message
define("DB_MSG_ERROR", 'Could not connect!<br />Please contact the site\'s administrator.');
############## Make the mysql connection ###########
$conn = mysql_connect(HOST, DBUSER, PASS) or die(DB_MSG_ERROR);
$db = mysql_select_db(DB) or die(DB_MSG_ERROR);
$query = mysql_query("
SELECT *
FROM persons
WHERE age='".$_POST['value']."'
");
echo '<table>';
while ($data = mysql_fetch_array($query)) {
echo '
<tr style="background-color:pink;">
<td style="font-size:18px;">'.$data["name"].'</td>
<td style="font-size:18px;">'.$data["age"].'</td>
</tr>';
}
echo '</table>';
?>
控制的东西取决于你想要的东西，但使用那些代码，将这两个文件放在同一个目录，你应该没问题！
The controlling stuff depends from what you want, but use that code, place those two files in the same directory, and you should be fine!
任何问题或更明确的代码，请告诉我们;）
Any problems or a more explicative code, please let us know ;)
这篇关于提交搜索查询&获取搜索结果而不刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
