How to solve the problem in ajax?

Question

JavaScript

There is this chat:

<div class="chat">
                                    <div class="chat-title">Чат</div>
                                    <div class="chat-block">
                                        <?php foreach ($coments as $com) {
                                            $uss = User::find()->where(['id' => $com->user_id])->one();
                                            ?>
                                            <div class="com-box">
                                                <div class="sizik-com"></div>
                                                <div class="com-name"><?= $uss->username ?></div>
                                                <div class="com-text"><?= $com->text; ?></div>
                                            </div>

                                        <?php } ?>
                                    </div>
                                    <div class="coments-block">
                                        <?php $form = ActiveForm::begin(); ?>
                                        <?= $form->field($coment, 'text')->textarea(['class' => 'com-inp', 'name' => 'coment', 'row' => 4, 'placeholder' => 'Оставьте комментарии...'])->label('', ['class' => 'com-title']); ?>
                                            <button type="submit" class="btn-all2 btn-jiber"><img class="send-img" src="/img/send.png" alt=""></button>
                                        <?php ActiveForm::end(); ?>
                                    </div>
                                </div>

here in the form via ajax I send to the controller

$('form').on('beforeSubmit', function(){
    var data = $(this).serialize();
    $.ajax({
        url: '/site/index',
        type: 'POST',
        data: data,
        success: function(res){
            console.log(res);
        },
        error: function(){
            alert('Error!');
        }
    });
    return false;
});

and in the controller:

public function actionIndex()
    {
    if(Yii::$app->user->isGuest){
      return $this->redirect(['login']);
    }
        $coment = new Coment();
        $com = $_POST['coment'];
        $coment->text = $com;
        $coment->user_id = Yii::$app->user->id;
        $coment->save();

            $coments = Coment::find()->orderBy(['id' => SORT_DESC])->all();
        $veb = Vebinar::find()->one();
        $this->layout = '@app/views/layouts/main2.php';
        return $this->render('index', [
            'veb' => $veb,
            'coment'=>$coment,
            'coments'=>$coments,
        ]);
    }

Here I will send via ajax to site / index and there it is saved to the database. The question is how can I display $coments now in the index without updating? Now, only after reloading the page, new comments are displayed, I would like the comment to be displayed immediately after sending without reloading the page. Well, they probably understood, I now save to the database through the form without reloading, but now I don’t know how to display the same comments on the same page reloading, help

Answer 1

On the server side, return the newly created record (naturally in json format), further in this block

success: function(res){
              //манипуляции с данными
        },

add a newly created entry to your site (you can use .append()