Чтобы отправить форму, собрать результаты из базы данных и представить их пользователю без обновления, перенаправления или перезагрузки страницы, вам необходимо:
Использовать Ajax дляОтправьте данные из вашей формы в файл php;
Этот файл в фоновом режиме запросит базу данных и получит результаты для данных, которые он получил;
Получив результат запроса, вам нужно будет вставить его в элемент HTML на вашей странице, который готов представить результаты пользователю;
Наконец, вынужно установить некоторые управляющие элементы, чтобы стили и рабочий процесс документа работали гладко.
Итак, сказав это, вот рабочий пример:
У нас естьТаблица "лица" с полем "возраст" и полем "имя", и мы будем искать людей с возрастом 32. Далее мы представим их имена и возраст внутри div с table с розовымфон и очень большой текст.
Чтобы правильнопроверьте это, у нас будет заголовок, тело и нижний колонтитул с серыми цветами!
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>';
?>
Управляющий материал зависит от того, что вы хотите, но используйте этот код, поместите эти два файла в один и тот же каталог, и у вас все будет хорошо!
Любые проблемы или более понятный кодпожалуйста, дайте нам знать;)