Поиск по сайту AJAX + PHP + MySQL (AJAX)


Поиск по сайту  AJAX + PHP + MySQL (AJAX)

Доброго всем времени суток. Сегодня я рассмотрю оставшуюся часть связки AJAX+PHP+MySQL а именно AJAX.

В этой статье я расскажу как к поиску по сайту с использованием PHP + MySQL, рассмотренного в статье "Поиск по сайту AJAX + PHP + MySQL (PHP + MySQL)" придать динамизм и интерактивность, которую позволяет достичь технология AJAX.


Напомню, чего мы добиваемся:


Из поисковой формы с помощью технологии AJAX поисковый запрос передается на сервер, где в PHP скрипте происходит его обработка и формируется запрос к базе данных MySQL.

Получив ответ с результатами поиска скрипт PHP используя технологию AJAX передает его клиенту(браузеру), где он и отбражается.

На самом деле, сегодня я не расскажу вам ничего нового! Вы уже владеете всей необходимой информацией. Я просто объединю разрозненные ее части в одно целое.

Так, код JavaScript и HTML, с незначительными доработками, я возьму из статьи "Пример Ajax приложения - Телефонная книга (клиент)". А код PHP, опять таки с минимальными изменениями, из пред идущей статьи цикла - "Поиск по сайту AJAX + PHP + MySQL (PHP + MySQL)"

Сначала хочу предложить вашему вниманию результат.
Попробуйте что-нибудь вести в поисковое поле. Например: поиск, сайт, хостинг...

Поиск по сайту AJAX + PHP + MySQL (AJAX)


Поиск по сайту AJAX + PHP + MySQL

    Вы видите, что по мере набора текста в поле запроса, с помощью технологии AJAX динамически формируются результаты поисковой выдачи из базы данных.
    У себя в примере я сделал выборку из базы, проверяя на совпадения с названиями статей на сайте. Вы можете конечно же задать свои условия поиска, в зависимости от ваших потребностей

    Вот уже знакомый вам код JavaScript:


    Свернуть код:
    <script type='text/javascript'> 
        //Функция возвращает объект XMLHttpRequest
    function getXmlHttpRequest(){
        if (window.XMLHttpRequest){
            try {
                return new XMLHttpRequest();
            } 
            catch (e){}
        } 
        else if (window.ActiveXObject){
            try {
                return new ActiveXObject('Msxml2.XMLHTTP');
            } catch (e){}
            try {
                return new ActiveXObject('Microsoft.XMLHTTP');
            } 
            catch (e){}
        }
        return null;
    }
        // Очистка списка
    function clearList()
    {
        var ulResult = document.getElementById("ulResult");
        while (ulResult.hasChildNodes())
            ulResult.removeChild(ulResult.lastChild);
    }
        // Добавление нового элемента списка
    function addListItem(text){
        if (text.length == 0) return;
        var ulResult = document.getElementById("ulResult");
        var li = document.createElement("li");   
        ulResult.appendChild(li);
        var liText = document.createTextNode(text);  
        li.appendChild(liText);
    }
        //Поиск совпадения
    function searchNum(){
        // Параметры поиска
        var title = document.getElementById("txtTitle").value;
        // Формирование строки поиска
        var searchString = "query=" + encodeURIComponent(title);
        // Запрос к серверу
        var req = getXmlHttpRequest();
        req.onreadystatechange = function(){
            if (req.readyState != 4) return;
            var responseText = new String(req.responseText);
            var num = responseText.split('\n');
            clearList();
            for (var i = 0; i < num.length; i++)
                addListItem(num[i]);
        }           
        // Метод POST
        req.open("POST", "./find.php", true);
        // Установка заголовков
        req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        req.setRequestHeader("Content-Length", searchString.length);           
        // Отправка данных
        req.send(searchString);                    
    }
    </script>

    Я поменял в нем всего одно слово. Найдете какое?

    И код HTML:


    Свернуть код:
    <h3 style="text-align:center;">Поиск по сайту AJAX + PHP + MySQL</h3><br /> <div style="border:2px solid blue; padding: 50px 0;"> <form onsubmit="return false"> <fieldset style="width: 300px; margin: 0 auto; "> <legend>Поиск по сайту AJAX + PHP + MySQL</legend> <div> <label for="txtTitle">Поисковый запрос</label> <input onkeyup="searchNum()" id="txtTitle" type="text" name="title"/> </div> <button onclick="searchNum()">Поиск</button> </fieldset> </form> <ul id="ulResult" style = "list-style: none; text-align: center"></ul> </div>

    А здесь я поменял только заголовки у формы

    А вот вам и файл find.php:


    Свернуть код:
    <?php 
    header ("Content-type:text/html; charset=utf-8");
    
    /////////////// Определяем используемые функции //////////////////
    
     /* Открываем соединение с базой данных*/
    function connectDB (){
    // Определяем константы для соединения с базой данных
    define('DB_HOST', 'localhost');
    define('DB_USER', 'root');
    define('DB_PASS', 'password');
    define('DB_NAME', 'db_name');
    
    //Пытаемся соединится с базой данных
    $dbconn = mysql_connect(DB_HOST, DB_USER, DB_PASS)
      or die("Ошибка соединения с базой данных! " . mysql_error());
    //и выбрать таблицу
    mysql_select_db(DB_NAME); 
    // Устанавливаем кодировку
    mysql_query('SET NAMES utf8');
    //Возвращаем дескриптор соединения
    return $dbconn;
    }
    
    /*Закрываем соединение с базой данных*/
    function closeDB($dbconn){
    mysql_close($dbconn);
    }
    
    /*Обработка поискового запроса*/
    function search ($query) { 
    $text = '';
    
    // Проводим фильтрацию данных
    $query = trim($query);                     // Обрезаем пробелы и спецсиволы
    $query = strip_tags($query);               // Удаляем HTML и PHP теги
    $query = mysql_real_escape_string($query); // Экранируем специальные символы
    
    	
    //Поисковый запрос не пустой?
    if (!empty($query)){
      if (strlen($query) < 4) {
        $text = 'короткий поисковый запрос';
      }elseif (strlen($query) > 128) {
        $text = 'длинный поисковый запрос';
      } else {
        //Формируем строку поискового запроса 
        $sql = "SELECT `id`, `title`, `description`, `link`
          FROM `name_table` WHERE `description` LIKE '%$query%'
          OR `title` LIKE '%$query%'";
    // и выполняем его
        $result = mysql_query($sql);
        $end_result = '';
        if(mysql_num_rows($result) > 0) {
           while ($row = mysql_fetch_object($result)){
              $end_result .=  $row->title. "\n";
           }
           $text =  $end_result;
        } else {
            $text =  'По вашему запросу ничего не найдено';
        }	
      } 
    }else {
      $text = 'Задан пустой поисковый запрос.';
    }
    //Возвращаем сформированную строку поисковой выдачи
    return $text; 
    }
    ///////////// Сам скрипт обработчик ///////////////
    if (isset ($_POST['query']) && !empty($_POST['query'])){ 
      // Открываем соединение с базой данных
      $connect = connectDB();
      $search_result = search ($_POST['query']); 
      echo $search_result; 
      // Закрываем соединение с  базой данных
      closeDB ($connect);
    }
    ?>
    

    Я немного подсократил его, да преобразовал данные полученные от сервера в объект с помощью функции mysql_fetch_object(), которая работает аналогично mysql_fetch_array(), с единственным отличием, что функция возвращает объект, вместо массива. Это, кроме всего прочего, означает, что вы получаете возможность работать с полями по имени колонок. Мне просто так привычнее.

    Конечно не дело постоянно дергать функцию подключения к базе данных connectDB(), для этого лучше использовать шаблон SINGELTON, создающий только одно подключение к базе данных - но всему свое время. Дойдет очередь и до него.

    А пока в следующей статье, которая пока имеет рабочее название: Поиск по сайту jQuery + PHP + MySQL я покажу вам как можно значительно сократить JavaScript код, используя библиотеку jQuery. Ну и конечно, просто таки назрела необходимость модернезировать результаты поисковой выдачи.
    А на этом сегодня все. Как обычно, с удовольствием отвечу на ваши вопросы.

    Автор: Сергей Зарубин

    Дата: 2012-06-15

    Колличество просмотров: 13961

    Нравится

    Комментарии к заметке:

    Комментарий добавил(а): Витя
    Дата: 2012-06-27

    Классный урок, очень помог, а как сделать поиск по параметрам используя этот скрипт? То-есть возраст, пол, вес. Нужно в форму добавить радио-кноки это я знаю но в php как сделать?

    Комментарий добавил(а): Витя
    Дата: 2012-06-27

    К стати перелепил под себя скрипт - у меня экранит теги почему-то, то-есть По вашему запросу <strong>Марина</strong> найдено 1429 пользователей:<div class="infoBlock"> кто подскажет что делать?

    Комментарий добавил(а): Кирилл
    Дата: 2012-06-27

    Привет. Настроил. все работает. Но есть один нюанс. Можно ли как-то выводить html в поле под поиском? Почему-то не отображает html-теги :(

    Комментарий добавил(а): Кирилл
    Дата: 2012-06-27

    Уточнение: хочу результаты поиска делать линками. В чем проблема может быть?

    Комментарий добавил(а): Сергей Зарубин
    Дата: 2012-06-28

    Поиск по параметрам делается с помощью передачи этих параметров php скрипту.
    Кто вам мешает добавить дополнительные параметры напрмер вот здесь:

       // Параметры поиска
    var title = document.getElementById("txtTitle").value;
    // Формирование строки поиска
    var searchString = "query=" + encodeURIComponent(title);

    а в скрипте php проверяете полученные значения наподобие:
    if (isset ($_POST['query']) && !empty($_POST['query'])){
    ...
    }

    Добавить HTML теги и сделать результаты выдачи ссылками конечное же можно.

    Это и многое другое интересное я продемонстрирую в статье "Поиск по сайту jQuery + PHP + MySQL" , которую планирую выложить в самое ближайшее время.

    Комментарий добавил(а): Витя
    Дата: 2012-07-02

    Ждем поиск по сайту с jQuery будет круто чувствую!!! Спасибо!!!!!

    Комментарий добавил(а): Витя
    Дата: 2012-07-05

    Ждем поиск по сайту с jQuery будет круто чувствую!!!

    Комментарий добавил(а): ML
    Дата: 2012-07-20

    При больших объемах данных скорей всего будет медленно работать, т.к. выборка осуществляется со словом "LIKE".

    Комментарий добавил(а): Сергей Зарубин
    Дата: 2012-07-21

    Ну это при очень больших. Для работы среднего сайта этого вполне достаточно.
    А вообще это только пример, не претендующий на истину в последней инстанции.
    А ведь есть еще полнотекстовый поиск для MyISAM-таблиц, есть такие монстры как СФИНКС или Яндекс.Сервер.
    Что выбрать решать только вам!

    Комментарий добавил(а): Григорий
    Дата: 2014-12-22

    Как вставить ссылку в выводимый результат поиска. Так пробовал $end_result .= "
    <a href='http://".$_SERVER[`SERVER_NAME`]."/bp/link.php?id=".$row->BOOKID."'>
    ". $row->CHAPTERNO."</a>".$row->VERSETEXT."\n";
    }

    $text = $end_result;
    и ссылка не работает - выводит теги как текст. Смысл в поиске пропадает из за этого.

    Комментарий добавил(а): Василий
    Дата: 2015-10-05

    Будьте добры дайте базу для примеров на почту или прикрепите к теме admin@yargps.ru

    Комментарий добавил(а): Саня
    Дата: 2015-11-06

    Для отображения html тегов замените строку
    var searchString = "query=" + encodeURIComponent(title);
    на
    var searchString = "query=" + title;
    а эту строку
    addListItem(num[i]);
    на document.getElementById('ulResult').innerHTML = num[i];

    Кому потог можете сказать спасибо на R127868587732 ))))

    Комментарий добавил(а): Алекс
    Дата: 2017-08-20

    Полезная статья.



    Добавить новый комментарий


    Введите число с картинки:

    captcha