0

Имеется форма, в которую пользователь вводит текстовое сообщение, затем оно обрабатывается в 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);
}
?>

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

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

1
  • сделал в php: echo json_encode($answer); в скрипте на странице: var msg = $('#chat_user_message').val(); и data: msg в success: var result = json_decode(response); document.getElementById(chat_answer).innerHTML = result; Ответ все также не приходит
    – INOK
    6 июн 2018 в 18:55

2 ответа 2

0

Первым делом изменил 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);
            },
        });
    })
});

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

4
  • Спасибо огромное, действительно, теперь все в порядке. Если не сложно- еще один вопрос: при определенном значении $answer мне нужно будет возвращать еще одну переменную. Как это принято делать? Возвращая массив из двух переменных? Или же есть какой-то способ лучше?
    – INOK
    6 июн 2018 в 19:21
  • @INOK, можно передавать массив $answer = ['result' => 'success', 'msg' => 'OKAY'];, в этом роде.
    – entithat
    6 июн 2018 в 19:22
  • спасибо еще раз, вы меня правда выручили
    – INOK
    6 июн 2018 в 19:26
  • @INOK, пожалуйста:) Обновил для отображения данных если это массив.
    – entithat
    6 июн 2018 в 19:28
0

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

6
  • form закрыт, я криво код сюда вставил, моя ошибка, уже пофиксил первый пост. #chat_answer пробовал размещать под формой, не помогло. Проблема в том, что при отправке формы ничего не происходит. То есть не приходит никакого ответа. Я пытался выводить алерт, для теста. в success:, он тоже не выводится, после этого проверил алертом в error:, тоже безрезультатно. Скрывать форму не могу, так как пользователь может вводить не одно сообщение.
    – INOK
    6 июн 2018 в 18:33
  • Тогда что значит «избежать повторной отправки формы»? Блок #chat_answer в любом случае размещается вне формы. Чтобы проверить аякс вы отправляете $answer — попробуйте какой-то текст для отладки. В js проверьте, что переменная chat_user_message реально указывает на элемент #chat_user_message.
    – MAX
    6 июн 2018 в 18:40
  • «избежать повторной отправки формы»- я имел в виду, что до этого я сделал обработку на php, без ajax'a, и там была проблема- при обновлении страницы производилась повторная отправка формы. Насчет остального: простите, это правда первый раз, когда я занимаюсь чем-то подобным, так что, не разъясните, как именно я должен проверить chat_user_message? И насчет текста для отладки в $answer- я не уверен, что правильно вас понял, но я уже, собственно, вводил разные варианты сообщений и я знаю, какие ответы должны были вернуться, но не возвращалось ничего
    – INOK
    6 июн 2018 в 18:44
  • При отладке аякса, сделайте очень простой php-обработчик, который состоит из одной строчки «echo 'OK!'». Когда отладите сам аякс-запрос, то уже возьмётесь за обработчик, но так вы будете 100% уверены, что запрос проходит.
    – MAX
    6 июн 2018 в 18:47
  • Переменная chat_user_message — может $('#chat_user_message')?
    – MAX
    6 июн 2018 в 18:48

Ваш ответ

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

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