С Новым годом! Форум программистов, компьютерный форум, киберфорум
PHP: базы данных
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/9: Рейтинг темы: голосов - 9, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 28.10.2014
Сообщений: 15

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

06.01.2015, 20:46. Показов 1796. Ответов 5
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Доброго времени.
Студент, учусь, сейчас пробую реализовать интерфейс для работы с бд на 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>
В таком виде оно уже не работает. Вполне возможно что ошибка очевидная, еще учусь. Буду благодарен за совет.
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
06.01.2015, 20:46
Ответы с готовыми решениями:

вывод результатов поиска по БД в таблицу
Добрый вечер, форумчане. Возникла такая проблема: имеется функция для поиска подходящего предложения (выбирает данные из нескольких таблиц...

Вывод результатов поиска на отдельной странице
Народ! Всем привет! Я - новенький. Вопрос такого рода. С созданием баз данных на Денвере, вроде, разобрался. Но. В инете куча различных...

Вывод результатов поиска в определенном div классе,как это реализовать?
index файл у меня непростой а с эффектом перелистывания страниц,получается index разделен div классы &quot;item&quot; и каждый item класс...

5
Superposition
 Аватар для Padimanskas
950 / 615 / 256
Регистрация: 27.10.2013
Сообщений: 2,083
06.01.2015, 22:02
Цитата Сообщение от asdds Посмотреть сообщение
Буду благодарен за совет.
Для передачи данных используйте JSON.
1
1 / 1 / 2
Регистрация: 02.01.2015
Сообщений: 18
06.01.2015, 22:10
Цитата Сообщение от asdds Посмотреть сообщение
Буду благодарен за совет.
посмотри здесь Как правильно распарсить json-строку autocomplete и вывести результаты в подготовленные поля возможно это поможет
1
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
33 / 33 / 9
Регистрация: 26.07.2013
Сообщений: 148
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
1
Superposition
 Аватар для Padimanskas
950 / 615 / 256
Регистрация: 27.10.2013
Сообщений: 2,083
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 можно будет убрать
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
07.01.2015, 18:05
Помогаю со студенческими работами здесь

Вывод результатов поиска по БД на странице поиска
Добрый день. Я начинаю изучать PHP и у меня возник вопрос. Я создал страницу поиска по БД и вывода результатов. С помощью метода post...

Вывод результатов поиска
Добрый вечер. Есть сайт http://profzon.com Там есть поиск. Выводятся только первые 10 результатов поиска, остальные не подгружаются....

Дальнейшая обработка результатов живого поиск ajax
Вопрос состоит не в том, как реализовать простой запрос ajax, а как при выборе одного из результатов поиска заполнить нужные поля в форме. ...

Присвоение ссылок каждому из результатов поиска
Добрый день. Я создал виртуальную БД по клиентам ТСЖ и их задолженности в phpmyadmin, и через поисковую строку на сайте осуществляю...

Выделение результатов поиска (без учета регистра)
Всем привет, помогите плиз. Никак не получается выделить результыта поиска. Есть скрипт который ищет, но нужно чтобы он...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
Модель микоризы: классовый агентный подход
anaschu 02.01.2026
Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути
Programma_Boinc 01.01.2026
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru