Как после отправки формы ajax вывести эти данные на страницу?

Question

[Boooom]

есть вот такая форма отправки сообщений, настроил AJAX, в базу записывает, теперь потребовалось достать эти данные обратно и не знаю как это сделать...

Как это реализовать без обновления страницы? Есть пример реализации?

<div class="comment-box">
                                        <form id="contactform" method="POST" >
                                            {{ csrf_field() }}
                                            <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
                                            <input type="hidden" name="order_id" value="{{$order->id}}">
                                            <textarea class="comment-box-input" name="description" placeholder="Напишите комментарий…" dir="auto" style="overflow: hidden; overflow-wrap: break-word;"></textarea>
                                            <div class="comment-box-act">
                                                <button class="comment_buttom" type="submit">Отправить</button>
                                            </div>
                                        </form>
                                    </div>
                                    <div id="weather-temp"></div>

<script>
                                        $(document).ready(function(){
                                            $('.comment-box').on('submit','#contactform', function(e){
                                                e.preventDefault();
                                                $.ajax({
                                                    type: 'POST',
                                                    url: '/admin/order/modal/addcomment',
                                                    data: $('#contactform').serialize(),
                                                    success:function(data){
                                                        $( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );
                                                    }
                                                });
                                                $('input[type="text"], textarea').val('');
                                            });
                                        });
                                    </script>

и вторая часть вопроса:

В скрипте не работает получение данных

success:function(data){
                                                        $( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );
                                                    }

можете подсказать что не так?

Comments

[Михаил]

Надо больше информации.
1. Открыть этот минимальный пример у себя в браузере
2. Посмотреть закладку Network в консоли разработчика
3. Увидеть ошибку и скинуть сюда

[Boooom]

Михаил, консоль пустая, а в network вот это

[Михаил]

Boooom, Консоль не может быть пустая там сразу видно 2 ошибки. Скиньте адрес сайта и какой-то временный логин-пароль посмотреть

[Boooom]

Михаил, там ошибки то что картинки нету и скрипт бутстрапа старый где то валяется GET https://cdn.jsdelivr.net/npm/bootstrap-select@1.13... net::ERR_ABORTED 404 не используется уже

[Boooom]

Михаил, на локалке делаю(

[Михаил]

посмотри что приходит в ответ, в каком варианте, попробуй вывести console.log(data) может datatype не определяется корректно, и вообще приходит ли ответ в теле

Answer 1

[Олег Фролов]

Я бы так упростил.

$(document).ready(function(){
      $('#contactform').on('submit', function(e){
          e.preventDefault();
          $.post('/admin/order/modal/addcomment', $('#contactform').serialize(),function(data){
                  $( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );
          });
          $('input[type="text"], textarea').val('');
      });
  });

А по сути вопроса, смотрите в консоли разработчика что у вас уходит и приходит с сервера. Может скрипт '/admin/order/modal/addcomment' ничего не возвращает из-за ошибки, а может... Да дофига чего может, нужно смотреть консоль!

Comments

[Boooom]

'/admin/order/modal/addcomment - отрабатывает, данные в базу записываю, обратно выводятся если страницу обновляю

консоль соответственно пустая, ошибок новых не показывает

[Boooom]

в network вот что падает

[Олег Фролов]

а что во вкладке Response?

[Boooom]

Олег Фролов,

[Олег Фролов]

Ну вот, как я и предполагал - пусто, потому и в документ ничего не выводится.
Разбирайтесь со скриптом /admin/order/modal/addcomment - проблема в нём.
У вас там есть вывод данных вообще или только запись в базу?

[Boooom]

Олег Фролов, действительно, обратно данные не возвращал... return ($request);

а как их теперь в сообщение превратить?

При выводе у меня связок куча $order = Orders::with('user', 'order_customer', 'order_message.user', 'order_goods.goods')->where('id', $id)->first();

Я в базу то записал 'user_id' => $request->user_id ?? null , обратно он мне вернул значение user_id, а теперь надо по этому user_id вывести сообщения из 'order_message.user'

[Олег Фролов]

сообщения нужно прочитать в массив и вывести через json_encode

[AUser0]

Олег Фролов, учитывая, что должно быть .html( "" + data + " degrees" ), возвращать нужно явно не JSON!

[Boooom]

Олег Фролов, спасибо, помогли, поставил "решение", пошел гуглить как выводить с json, еще ни разу не работал с этим

Если где то будет не получается, могу еще раз попросить вас посмотреть что не так у меня в коде?)

[Олег Фролов]

Как резонно заметил AUser0, вы можете сгенерить на сервере готовый кусок html кода и вернуть его.

[Boooom]

Олег Фролов, все что нужно вывести дак это добавленное сообщение, данные которого ранее не приходили

осталось понять как лучше это сделать, а главное правильно

[Олег Фролов]

Boooom, Либо получать голые данные в JSON и скриптом в браузере натягивать на шаблон, либо натягивать данные на шаблон на сервере и получать в браузер уже готовый HTML. Это уже вопрос вашей религии :)

Answer 2

[Михаил]

вторую строку замени в скрипте

$('.comment-box').on('submit','#contactform', function(e){