Отправьте Поисковый запрос и получите Результат поиска без обновления
Я хочу утверждать, что поисковый запрос формирует и получает результат поиска без перенаправления/перезагрузки/обновления на той же странице.
Мой контент является динамическим, так не может использовать, они "отправляют форму контакта, не обновляя страницу, которая отвечает на успехе".
4 ответа
Чтобы отправить форму, получить результаты из базы данных и представить их пользователю без обновления, перенаправления или перезагрузки страницы, вам необходимо:
Использовать Ajax для отправки данных из формы в php файл;
Этот файл в фоновом режиме будет запрашивать базу данных и получать результаты для полученных данных;
С результатом запроса вам нужно будет внедрить его в html элемент на вашей странице, который готов представить результаты пользователю;
Наконец, вам нужно установить некоторые управляющие элементы, чтобы стили и документооборот работали гладко.
Итак, вот рабочий пример:
У нас есть таблица "persons" с полем "возраст" и полем "имя", и мы собираемся искать людей с возрастом 32 года. Далее мы представим их имена и возраст внутри div с table с розовым фоном и очень большим текстом.
Чтобы правильно протестировать это, у нас будут header, body и footer с серыми цветами!
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>';
?>
Управление зависит от того, что вы хотите, но используйте этот код, поместите эти два файла в одну директорию, и все будет в порядке!
Любые проблемы или более понятный код, пожалуйста, дайте нам знать ;)
Вы, вероятно, захотите начать с любого из тысяч руководств «AJAX для начинающих», которые вы можете найти в сети. Поиск в Google с этим термином должен вас подтолкнуть.
Для начала попробуйте следующее:
http://www.destraynor.com/serendipity/index.php?/archives/29-AJAX-for-the-beginner.html
После прочтения при этом имейте в виду, что вам действительно не нужно писать какой-либо код обработки XHR. Как указал Джейми, jQuery или любая другая из множества имеющихся Javascript-библиотек может значительно упростить ваш клиентский код AJAX.
Хорошо, если вы сможете немного познакомиться с Ajax, прежде чем сразу переходить к коду. Ajax - точное решение вашей проблемы. Он асинхронно делает запрос к серверу, получает результат, и данные на странице могут быть изменены с результатом. Все это делается на JavaScript.
Предположим, у вас есть такой html:
<html>
<body>
<div id="myDiv"> your content area</div>
<button type="button" onclick="loadByAjax()">Change Content</button>
</body>
</html>
Теперь ваш код javascipr будет иметь такой вид:
<script type="text/javascript">
function loadByAjax()
{
$.ajax({
type: "POST",
url: "yourserverpage.php",
data: "searchkey=data_from_user_input",
success: function(response_data){
$('myDiv').html(response_data)
}
});
}
</script>
так что, как правило, при нажатии кнопки будет выполняться JavaScript. Он вызовет серверный скрипт php, передаст параметры, полученные в результате ввода пользователя, получит данные ответа и поместит их в div. Итак, ваша страница обновляется без полного обновления.
Также, пожалуйста, поймите, что я использовал здесь библиотеку jquery для функции Ajax.
Для этого нужен AJAX. В jQuery (извиняюсь, если вы ищете другую библиотеку)
$("form#search").bind('submit',function() {
$.post("search.php",this.serialize(),function(data) {
// Put the code to deal with the response data here
});
return false;
});