Как избавиться от скачка после выполнения скрипта поиска?

Question

[Михаил Максимов]

Всем доброго времени суток!

Существует такая страница реестра, на которой выполняется поиск через форму с помощью php скрипта в mysql БД. Естественно, после того, как скрипт отработал, страница обновляется и рендерится с самого начала. Как реализовать поиск, чтобы обновление происходило налету? Куда гуглить, чем пользоваться?

<div class="input_search">
				<form name="search" method="post">
					<input type="search" name="query" class="" placeholder="Введите ИНН, ОГРН, Название организации">
					<button class="" type="submit">Поиск</button>
				</form>	
			</div>		
			<div class="response">				
				<table class="mx">
					<tbody>
						<tr>
							<th scope="col">Наименование</th>
							<th scope="col">ИНН</th>
							<th scope="col">Адрес</th>
							<th scope="col">Право выполнять работы</th>
							<th scope="col">Перечень видов работ</th>
							<th scope="col">Предельная дата прохождения годовой проверки</th>
						</tr>
						<?php 
					define('DB_HOST', 'localhost');
					define('DB_USER', 'user');
					define('DB_PASS', '');
					define('DB_NAME', 'database');

					if (!mysql_connect(DB_HOST, DB_USER, DB_PASS)) {
					    exit('Cannot connect to server');
					}
					if (!mysql_select_db(DB_NAME)) {
					    exit('Cannot select database');
					}

					mysql_query('SET NAMES utf8');

					function search ($query) 
					{ 
					    $query = $_POST[query];
					    $query = trim($query); 
					    $query = mysql_real_escape_string($query);
					    $query = htmlspecialchars($query);

					    if (!empty($query)) 
					    { 
					        if (strlen($query) < 3) {
					            $text = '<p>Слишком короткий поисковый запрос.</p>';
					        } else if (strlen($query) > 12) {
					            $text = '<p>Слишком длинный поисковый запрос.</p>';
					        } else { 
					            $q = "SELECT `regDate`, `fullOrgName`, `inn`, `orgFullName`
					                  FROM `o60uf_sro_` WHERE `inn` LIKE '%$query%'";

					            $result = mysql_query($q);

					            if (mysql_affected_rows() > 0) { 
					                $row = mysql_fetch_assoc($result); 
					                $num = mysql_num_rows($result);

					                $text = '<p>По запросу <b>'.$query.'</b> найдено совпадений: '.$num.'</p>';

					                do {
					                    // Делаем запрос, получающий ссылки на статьи
					                    $q1 = "SELECT `fullOrgName` FROM `o60uf_sro_` WHERE `inn` = '$query'";
					                    $result1 = mysql_query($q1);

					                    if (mysql_affected_rows() > 0) {
					                        $row1 = mysql_fetch_assoc($result1);
					                    }

					                    $text .= '
					                        <tr>
					                            <td scope="col">'.$row['fullOrgName'].'</td>
					                            <td scope="col">'.$row['inn'].'</td>
					                            <td scope="col">'.$row['orgPlace'].'</td>
					                            <td scope="col">'.$row['dopuskInfo'].'</td>
					                            <td scope="col">'.$row['orgPlace'].'</td>
					                            <td scope="col">'.$row['orgPlace'].'</td>
					                        </tr>
					                        ';
					                } while ($row = mysql_fetch_assoc($result)); 
					            } else {
					                $text = '<p>По вашему запросу ничего не найдено.</p>';
					            }
					        } 
					    } else {
					        $text = '<p>Задан пустой поисковый запрос.</p>';
					    }

					    return $text; 
					} 
					?>
					<?php 
if (!empty($_POST['query'])) { 
    $search_result = search ($_POST['query']); 
    echo $search_result; 
}
?>
					</tbody>
				</table>
			</div>
		</div>

Answer 1

[Rsa97]

Естественно, раз вы используете стандартную отправку формы, то страница полностью перезапрашивается с сервера.
Вас спасёт AJAX.
Ну и, до кучи, от mysql_ надо уходить, в свежих версиях PHP эти функции не работают. Используйте PDO или mysqli_

Answer 2

[Евгений Иванов]

Технология
AJAX (аббревиатура от «Asynchronous Javascript And Xml») – технология обращения к серверу без перезагрузки страницы.

А конкретно, что вам надо - это
jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX.

Приблизительный код
Javascript

$(document).on('click', '.my_link', function(){
$.ajax({url: 'actions.php', method: 'POST', data: {'data-action': 'show_users_table'}, 
success: function(data){
$('.table_content').html(data);
}});
};

HTML

<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>

<a class="my_link">Обновить таблицу</a>
<div class="table_content"></div>

Скрипт
При щелчке по ссылке с классом my_link jquery отправляет на адрес actions.php (скрипт в моей папке) методом пост данные data-action и значение show_users_table.
А в файле actions.php я принимаю data-action и смотрю, а что там? Вижу - о да там же show_users_table, т.е. просят меня показать табличку с юзерами. Выполняю все нужные действия и возвращаю (echo) таблицу.

А JS скрипт и ждет возврата данных success: function(data). И помещает код таблицы в data.
И далее $('.table_content').html(data) - т.е. найти элемент с классом table_content (это див на странице) и вставить туда содержимое переменной data (мою таблицу).

И вот, я получил таблицу без перезагрузки страницы.