Я хочу отправить форму поиска и получить результат поиска без перенаправления / перезагрузки / обновления на той же странице .
Мое содержание динамическое, поэтому не может использовать те, которые «представляют форму контакта без обновления страницы, которая отвечает на успех».
Чтобы отправить форму, собрать результаты из базы данных и представить их пользователю без обновления страницы, перенаправления или перезагрузки, вам необходимо:
Используйте 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>'; ?>
Контролирующий материал зависит от того, что вы хотите, но используйте этот код, поместите эти два файла в один и тот же каталог, и все должно быть в порядке!
Любые проблемы или более объяснительный код, пожалуйста, сообщите нам;)
Вы, вероятно, захотите начать с любого из тысяч учебных пособий «AJAX для начинающих», которые вы можете найти в сети. Поиск Google с этим термином должен вас поймать.
Попробуйте это для начала:
http://www.destraynor.com/serendipity/index.php?/archives/29-AJAX-for-the-beginner.html
После того, как вы это прочитали, имейте в виду, что вам действительно не нужно писать код обработки XHR. Как отметил Джейми, jQuery или любое другое множество библиотек Javascript там, может значительно упростить ваш код 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; });
Это хорошо, если вы можете получить некоторые основы 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 serverside, передавать параметры, полученные им от пользователя, и извлекать данные ответа и размещать их внутри div. Таким образом, ваша страница обновляется без полного обновления.
Также, пожалуйста, поймите, что я использовал jquery-библиотеку здесь для функции Ajax.