0

С ajax знаком ужасно, помогите разобраться. Есть форма:

        <form action="controller/car_search.php" method="POST">
            <input type="text" name="carname" placeholder="Поиск автомобиля">
        </form>

action ведет на:

<?php include_once('db.php');
    $query = ('SELECT * FROM carsekb WHERE car_name LIKE :car ORDER BY car_name ASC');
    $stmt = $pdo->prepare($query);
    $stmt->execute(['car' => '%'.$_POST['carname']."%"]);
    $results = $stmt->fetchAll(PDO::FETCH_ASSOC);
    echo "<table>";
    for ($i = 0; $i < count($results); $i++) { ?>
        <tr>
            <td><?= $results[$i]['car_name']; ?></td>
            <td><?= $results[$i]['uberstart']; ?></td>
            <td><?= $results[$i]['uberx']; ?></td>
        </tr>
    <?php } 
    echo "</table>"; ?>

То есть сейчас при поиске открывается новая страница. Как сделать так, чтобы через ajax на этой же странице сразу после поиска вылезали результаты? вопрос вроде бы простой, но в интернете примеры которые использовал мне не понятны =(

1 ответ 1

3

Разделите обработчик, используйте:

  • index.php (откуда берутся данные и куда они возвращаются после обработки ajax-запроса);
  • script.js (обработчик событий, отправка ajax-запросов);
  • controller/car_search.php (обработчик ajax-запроса);

html:

<form>
    <input type="text" name="carname" id="carname" placeholder="Поиск автомобиля">
</form>

<div id="cont"></div> -- пустой контейнер, куда вставляете таблицу

js:

$("#carname").on('change',function(){
    // при изменении элемента значение параметра, наприммер $(this).val().trim() или $(this).html().trim();
    var car = $('#carname').val().trim(); 

    $.ajax({ 
        // Отправляете на другой PHP-скрипт (грубо говоря, обработчик события на сервере, где производите действия)
        url: 'controller/car_search.php', 
        type: 'POST',
        dataType : "json",
        data:{
            car: car
        },
        success: function(response){
            // меняете значение контейнера на то, которое вернул AJAX-Запрос
            $('#cont').html(response); 
        },
        error: function(){
            alert("Произошла ошибка");
        }
    });             
});

php:

<?php 

include_once('db.php');

$car = filter_input(INPUT_POST, 'car', FILTER_SANITIZE_STRING);
if (isset($car))
{
    $query = ('SELECT * FROM carsekb WHERE car_name LIKE :car ORDER BY car_name ASC');
    $stmt = $pdo->prepare($query);
    $stmt->execute(['car' => '%'.$car."%"]);
    $results = $stmt->fetchAll(PDO::FETCH_ASSOC);
    $table = "<table>";
    for ($i = 0; $i < count($results); $i++) {
            $table .= "<tr>";
                $table .= "<td> {$results[$i]['car_name']} </td>";
                $table .= "<td> {$results[$i]['uberstart']} </td>";
                $table .= "<td> {$results[$i]['uberx']} </td>";
            $table .= "</tr>";
    } 
    $table .= "</table>"; 
    json_encode($table);
}
else
{
    json_encode("Вы прислали пустую переменную 'param_1'"); // отправляете обратно
}

?>
14
  • спасибо, сейчас попробую разобраться
    – Paul Wall
    2 окт 2017 в 8:01
  • заменил в пхп в строке $stmt->execute(['car' => '%'.$_POST['carname']."%"]); $_POST['carname'] на $car
    – kstkt
    2 окт 2017 в 8:06
  • я может чего не так делаю: но каждый раз пишет Произошла ошибка и success никак не получается хз что не так
    – Paul Wall
    2 окт 2017 в 11:08
  • Sql-запрос отрабатывается? 1. Попробуйте вернуть вместо таблицы строку запроса и выполнить её в клиенте; 2. Возьмите кусок php-кода, сделайте "фиктивную" переменную $car и попробуйте выполнить запрос
    – kstkt
    2 окт 2017 в 12:57
  • перемести скрипт из низа в хедер стал получать success, но теперь когда вбиваю в поиск и жму enter страница перезагружается и ничего не происходит, хотя в адресной строке есть гет запрос
    – Paul Wall
    2 окт 2017 в 12:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.