Ajax вывести результат php-скрипта в div

334

01 июля 2018, 17:50

Имеется форма, в которую пользователь вводит текстовое сообщение, затем оно обрабатывается в php и пользователь получает ответ. Это мой первый опыт с подобным, так что сейчас я сделал вариант на костылях, чтобы избежать повторной отправки формы, он работает без ajax'a, но хотелось бы все же сделать все по-людски.

<form name="chat" action="" method="post" id="chat">
<span id="chat-head-content-form">
    <input type="text" name="chat_user_message" id="chat_user_message" />
</span>
<input type="submit" name="chat_done" value="&#10004" class="form-submit" />
<br/><br/>
<div id="chat_answer"></div>
</form>

Я пытался сделать так (но, видимо, что-то упускаю):

<script>
    $(document).ready(function(){
        $('#chat').submit(function(event){
            var msg = $('#chat_user_message').val();
            $.ajax({
                url : 'script.php',
                type : 'POST',
                dataType: 'html',
                data: msg,
                success: function(response) {
                    var result = json_decode(response);
                    document.getElementById(chat_answer).innerHTML = result;
                },
            });
        })
    });
</script>

скрипт, обрабатывающий сообщение и возвращающий ответ:

<?php
if (isset($_POST["chat_user_message"])) {
    $answer = $_POST["chat_user_message"];
    header('Content-Type: application/json');
    echo json_encode($answer);
}
?>

Проблема в том, что при отправке формы ничего не происходит. То есть не приходит никакого ответа.

Обновил код, теперь все выглядит вот так, но все еще не работает, страница рефрешится при отправке формы, ответ не выводится.

Answer 1

Первым делом изменил script.php:

<?php
if (isset($_POST["chat_user_message"])) {
    $answer = [
        'status' => 'ok',
        'message' => 'It is working!'
    ];
    echo json_encode($answer);
}

Тут мы использовали json_encode().
Дальше изменим ajax-запрос.

$(document).ready(function() {
    var form = $('#chat');
    form.submit(function(event) {
        event.preventDefault(); // Добавили, чтобы страница не перезагружалась
        $.ajax({
            url: 'script.php',
            type: 'POST',                        
            data: form.serialize(), // Передаём данные
            success: function(response) {
                var result = JSON.parse(response);
                $("#chat_answer").html(result.message);
            },
        });
    })
});

Вот и всё! Теперь, попробовав на локальном сервере, всё работает.

Answer 2

В первую очередь закройте тэг FORM, а блок #chat_answer разместите где-то под формой. При получении ответа по аяксу (в success), просто скрываете форму #chat с помощью hide() или подобной.