Вывод результатов поиска c AJAX

@asdds · Регистрация: 28.10.2014

Студворк — интернет-сервис помощи студентам

Доброго времени.
Студент, учусь, сейчас пробую реализовать интерфейс для работы с бд на mysql, застрял на одном моменте, кому не сложно подскажите пожалуйста.
Страница на html, на ней, помимо прочего, форма поиска следующего вида:

HTML5
1
2
3
4
5
6
<form class="form-inline" role="form" action="table.php" method="post">
      <div class="form-group">
        Search: <input class="form-control" type="text" name="q" required><br>
      </div>
      <input type="submit" class="btn btn-default">
</form>

И див с выводом:

HTML5
1
<div id="table"><?php include 'table.php';?></div>

table.php рабочий, он, как мне и нужно, по умолчанию выводит на страницу полную таблицу, а при использовании поиска выдает корректные результаты. Но, само собой, при поиске совершает переход с главной страницы на table.php
Теперь я хочу реализовать AJAX, то есть чтобы результаты поиска выводились на той же главной странице без перехода и перезагрузки. Код следующий:

table.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<?php
require 'connect.php';
require 'check.php';
 
$Err = "";
 
$input = input_trim($_POST["q"]);
 
if (empty($input))
    {
        $sql = "SELECT id, firstname, lastname, year, city FROM Students";
        $result = $conn->query($sql);
    }
else 
    {
        $sql = "SELECT * FROM Students WHERE ID LIKE '%$input%'
        OR Firstname LIKE '%$input%' OR Lastname LIKE '%$input%'
        OR Year LIKE '%$input%' OR City LIKE '$input'";
        $result = $conn->query($sql);
    }
if (empty($Err))
    {
        if ($result->num_rows > 0) 
            {
                echo "<table class='table table-bordered'>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Year of birth</th>
                        <th>City</th>
                    </tr>
                </thead>
                <tbody>";
                while($row = $result->fetch_assoc()) 
                    {
                        echo "<tr>
                                <td>".$row["id"]."</td>
                                <td>".$row["firstname"]."</td>
                                <td>".$row["lastname"]."</td>
                                <td>".$row["year"]."</td>
                                <td>".$row["city"]."</td>
                        </tr>";
                    }
                echo   "</tbody>
                        </table>";
            }
        else 
        {
            echo "0 results";
        }
    }
else
{
    echo $Err;    
}
 
$conn->close();
?>

Добавляю код для AJAX. Он вроде тоже рабочий, по крайней мере функция navigate, которая не связана с формой поиска отрабатывает корректно, поиск же работает с функцией showresult:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var previous = "add";
var xmlhttp;
 
function navigate(url,clicked)
    {
        document.getElementById(previous).className = '';
        document.getElementById(clicked).className = 'active';
        loadXMLDoc(url,"form");
        previous = document.getElementById(clicked).id;
    }
 
function showresult(input)
    {
        
        loadXMLDoc("table.php?q="+input,"table");
    }
 
function loadXMLDoc(url,element)
    {
        xmlhttp=new XMLHttpRequest();
        xmlhttp.onreadystatechange=function()
                            {
                                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                                    {
                                        document.getElementById(element).innerHTML=xmlhttp.responseText;
                                    }
                            }
        xmlhttp.open("POST",url,true);
        xmlhttp.send();
    }

Соответственно, меняю форму для поиска на главной на такую:

HTML5
1
2
3
4
5
6
<form class="form-inline">
      <div class="form-group">
        Search: <input class="form-control" type="text"><br>
      </div>
      <button class="btn btn-default" onclick="showresult(this.value)">Search</button>
</form>

В таком виде оно уже не работает. Вполне возможно что ошибка очевидная, еще учусь. Буду благодарен за совет.

@Padimanskas · 06.01.2015, 22:02

Сообщение от asdds

Буду благодарен за совет.

Для передачи данных используйте JSON.

@WarDoctor · 06.01.2015, 22:10

Сообщение от asdds

Буду благодарен за совет.

посмотри здесь Как правильно распарсить json-строку autocomplete и вывести результаты в подготовленные поля возможно это поможет

@asdds · 07.01.2015, 01:16 **[ТС]**

Хочу уточнить, JSON в данном случае необходим или просто улучшит качество кода?
У меня либо вообще никакого ответа на поисковой запрос не приходит, либо после ковыряния в коде приходит полная таблица, без учета поискового запроса. И я подозреваю там где-то конкретная локальная ошибка.
А с парсингом проблемы как раз нет.

Добавлено через 2 часа 39 минут
Как и предполагал, была ошибка. В table.php вместо $input = input_trim($_POST["q"]);
Должно быть $input = input_trim($_REQUEST["q"]);

Теперь поиск работает, но происходит что-то совсем непонятное для меня - даже при одинаковом input он иногда срабатывает корректно, но иногда буквально через секунду перезагружается и опять выдает полную таблицу.
Вот тестовая страница - http://table.wc.lt/

@HWOARANG · 07.01.2015, 12:45

Сообщение от asdds

Теперь поиск работает, но происходит что-то совсем непонятное для меня - даже при одинаковом input он иногда срабатывает корректно, но иногда буквально через секунду перезагружается и опять выдает полную таблицу.
Вот тестовая страница - http://table.wc.lt/

У тебя кнопка сабмитит форму поиска.

HTML5
1
<button class="btn btn-default" onclick="showresult(this.form.valueId.value)" type="submit">Search</button>

убери type="submit". Если все равно будет перезагружать тогда в результате работы функции showresult нужно возвращать false

@Padimanskas · 07.01.2015, 18:05

Вот таким способом возвращаем массив JSON клиенту:

PHP
1
2
3
$array = array(array('name'=>'Masha'), array('name'=>'Sveta'), array('name'=>'Tania'), array('name'=>'Olia'));
header('Content-type: application/json;');
echo json_encode($array);

Здесь небольшой синглтон с методом загрузки JSON. Я опустил многие проверки, чтобы код стал чище и понятней.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var dataEx = {
 
    self : this,
 
    loadJSON : function (url, callback, error) {
 
        var xmlhttp = new XMLHttpRequest();
 
        xmlhttp.onreadystatechange = function () {
 
            if (this.readyState == 4 && this.status == 200) {
                callback.call(self, JSON.parse(this.responseText));
            } else {
                error.call(self, this.status);
            }
        };
 
        xmlhttp.open('POST', url, true);
        xmlhttp.send();
    }
};
 
dataEx.loadJSON('http://mydataserver', function (names) {
    // В этом коллбеке принимаем пришедшие данные, например:
    // document.querySelector('#element') = data['id'];
    alert(name[2]); // Вернет "Tania"
}, function (err) {
    // Здесь обрабатываем ошибки
});

Добавлено через 2 минуты
Если использовать responseType = 'json'; тогда JSON.parse можно будет убрать

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .

@asdds 0 / 0 / 0 Регистрация: 28.10.2014 Сообщений: 15
	07.01.2015, 01:16 [ТС]
	Хочу уточнить, JSON в данном случае необходим или просто улучшит качество кода? У меня либо вообще никакого ответа на поисковой запрос не приходит, либо после ковыряния в коде приходит полная таблица, без учета поискового запроса. И я подозреваю там где-то конкретная локальная ошибка. А с парсингом проблемы как раз нет. Добавлено через 2 часа 39 минут Как и предполагал, была ошибка. В table.php вместо $input = input_trim($_POST["q"]); Должно быть $input = input_trim($_REQUEST["q"]); Теперь поиск работает, но происходит что-то совсем непонятное для меня - даже при одинаковом input он иногда срабатывает корректно, но иногда буквально через секунду перезагружается и опять выдает полную таблицу. Вот тестовая страница - http://table.wc.lt/ 0