0

Добрый день есть такой скрипт который заносит имя и текст пользователя в базу через input а за-тем выводит его на страницу

введите сюда описание изображения

<?php
$db = new PDO('mysql:host=localhost;dbname=sitetest', 'root','123');
$db->exec("SET NAMES UTF8");

if(count($_POST) > 0){
    $name = trim($_POST['name']);
    $text = trim($_POST['text']);

    $name = htmlspecialchars($name);
    $text = htmlspecialchars($text);

    if ($name != '' && $text != '' ) {
        $query = $db->prepare("INSERT INTO `comments` SET name=:name, text=:text");
        $params = ['name' => $name, 'text' => $text];

        $query->execute($params);

        header("location: index.php");
        exit();
    }

}



// сортировка по дате ORDER BY dt DESC
$query = $db->prepare("SELECT * FROM `comments` WHERE is_moderate='0' ORDER BY dt DESC");
$query->execute();
// fetchAll() вывод массива в виде таблицы
$comments = $query->fetchAll();
// echo "<pre>";
//  print_r($comments);
// echo "</pre>";
?>


<form method="post" action="index.php">
    имя<br>
    <input type="text" name="name" value="<?php echo $name; ?>"><br>
    коментарий<br>
    <textarea name="text"><?php echo $text; ?></textarea><br>
    <input type="submit" value="отправить">
</form>


<div class="comments">
    <?php
    foreach ($comments as $one) {
        echo "<div class=\"item\">";
        echo "<span class=\"user-dt\">$one[dt]".'  '."</span>";
        echo "<strong class=\"user-name\">$one[name]</strong>";
        echo "<div class=\"user-text\">$one[text]</div>";
        echo "</div>";
    }
    ?>
</div>

вопрос в том как сделать то же самое через AJAX что бы текст и имя пользователя выводились динамически

1 ответ 1

0

Всё очень просто, вам потребуется повесить обработчик на отправку формы (addEventListener), который отменит стандартную отправку (preventDefault) и сам отправит запрос на сервер и обработает ответ (XMLHttpRequest). С jQuery это ещё проще (on, preventDefault, ajax).

Я накидал небольшой пример. У вас всё делает один скрипт. Иногда это оправдано, но часто лучше разделить код на части. Один скрипт формирует станицу с формой, второй записывает переданные методом POST данные в базу, а третий выдаёт список записей из базы. Затем надо объеденить результаты работы всех этих скриптов на одной странице с помощью JavaScript.

index.php

<form method="post" action="/newComment.php" class="js-form">
    имя<br>
    <input type="text" name="name" value=""><br>
    коментарий<br>
    <textarea name="text"></textarea><br>
    <input type="submit" value="отправить">
</form>


<div class="comments js-comments"></div>

<script>

// отдельные классы с префиксом js- позволяют не зависеть от вёрски
// на них не надо вешать никаких стилей (можно использовать id,
// но часто класс удобнее, так как позволяет создавать более одного элемента
// с таким именем на странице)

var inputName = document.querySelectorAll('input[name="name"]')[0];
var textareaText = document.querySelectorAll('textarea[name="text"]')[0];

var formEl = document.querySelectorAll('.js-form')[0]; // форма
var formMethod = formEl.getAttribute('method');
var formUrl = formEl.getAttribute('action');
var commentsEl = document.querySelectorAll('.js-comments')[0]; // блок комментариев

formEl.addEventListener('submit', function(event) {
    event.preventDefault(); // отменяем стандартную отправку, будем отправлять сами
    sendComment(function() {
        loadComments();
    });
});

loadComments(); // при загрузке сразу подтягиваем имеющиеся комментарии

function sendComment(onSend) {
    var xhr = new XMLHttpRequest();
    var postComments = 'name=' + inputName.value + '&' + 'text=' + textareaText.value;
    xhr.open(formMethod, formUrl + '?' + postComments, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status === 201) {
                if (onSend) {
                    onSend();
                }
            } else {
                alert('Что-то пошло не так!');
            }
        }
    };
    xhr.send();
}

function loadComments() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/comments.php', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                commentsEl.innerHTML = xhr.responseText;
            } else {
                alert('Что-то пошло не так!');
            }
        }
    };
    xhr.send();
}

</script>

newComment.php

<?php

    $db = new PDO('mysql:host=localhost;dbname=sitetest', 'root','123');
    $db->exec("SET NAMES UTF8");

    if(count($_REQUEST) > 0){
        $name = trim($_REQUEST['name']);
        $text = trim($_REQUEST['text']);

        $name = htmlspecialchars($name);
        $text = htmlspecialchars($text);

        if ($name != '' && $text != '' ) {
            $query = $db->prepare("INSERT INTO `comments` SET name=:name, text=:text");
            $params = ['name' => $name, 'text' => $text];

            $query->execute($params);

            http_response_code(201); // 201 -- создано
        }

    }

comments.php

<?php

    $db = new PDO('mysql:host=localhost;dbname=sitetest', 'root','123');
    $db->exec("SET NAMES UTF8");

    // сортировка по дате ORDER BY dt DESC
    $query = $db->prepare("SELECT * FROM `comments` WHERE is_moderate='0' ORDER BY dt DESC");
    $query->execute();
    // fetchAll() вывод массива в виде таблицы
    $comments = $query->fetchAll(PDO::FETCH_ASSOC);

    echo json_encode($comments);

?>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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