form post через ajax

296

03 октября 2017, 06:37

С 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 на этой же странице сразу после поиска вылезали результаты? вопрос вроде бы простой, но в интернете примеры которые использовал мне не понятны =(

Answer 1

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

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'"); // отправляете обратно
}
?>