在ajax成功之后将数据添加到视图中，而无需重新加载页面

Question

在一个模式中，有两个输入字段，输入被发送到控制器，在那里进行处理，然后存储在数据库中。

成功存储数据后，将重置并隐藏模式。

如何在不重新加载页面的情况下将新创建的数据（兴趣）添加到视图中？并存在与已经存在的元素相同的功能吗？

我在前端使用Bootstrap，在后端使用Laravel

Ajax：

<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $("#storeinterest").click(function(e){
        e.preventDefault();
        var itag = $('#create_itag').val();
        var name = $('#create_name').val();

        $.ajax({
            type:'POST',
            url:'{{URL::route('interests.store')}}',
            data:{name:name, itag:itag},
            success:function(data){
                _toastr_new(data.message, "top-full-width", "success", false, '.toastr-notify', 0);
                $('#create_itag').tagsinput('removeAll');
                $('#create_name').val('');
                $('#addInterest').delay(1000).fadeOut(450);

                setTimeout(function(){
                    $('#addInterest').modal("hide");
                }, 1500);
            }
        });
    });
</script>

来自控制器的响应：

$data = [
                'message' => trans('messages.newinterest'),
                'interest' => $interest
            ];
            return response()->json($data, 200);

查看：

<div class="infinite-scroll">
                <div class="row">
                    @foreach ($interests as $interest)
                        <div class="col-md-4 col-sm-6 col-xs-12 mtm-10 mtmm-115">
                            <div class="box-icon box-icon-center box-icon-round box-icon-large text-center">
                                <div class="front rahmen_iboard box-shadow-7">
                                    <div class="box1" style="background-color:#FFFFFF">
                                        <div class="box-icon-title">
                                            <div class="z-100">
                                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                                    <i class="ico-xs glyphicon glyphicon-option-vertical float-right pt-8"></i>
                                                </a>
                                                <ul class="dropdown-menu dropdown-left-iboard dropdown-menu-right">
                                                    <li class="dropdown-item">
                                                        <a class="p-2" data-toggle="modal" data-target="#updateInterest{{$interest->id}}"><i class="ico-xs glyphicon glyphicon-globe"></i> Bearbeiten</a>
                                                        <a class="p-2" data-toggle="modal" data-target="#delteInterest{{$interest->id}}"><i class="ico-xs fa fa-remove"></i> Löschen</a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="img-ausschnitt">
                                                <a class="img-hover" href="{{URL::route('interests.show', $interest->id)}}">
                                                    <img class="img-fluid" src="@if ($interest->mostVote) {{ Storage::url($interest->mostVote->postsImages->random()->image_thumbnail) }} @else {{ Storage::url('defaults/posts/nopost_interest.jpg') }}  @endif" alt="" />
                                                </a>
                                            </div>
                                            <div class="progress">
                                                <div class="@if ($interest->ratio < 20) progress-bar-danger @else progress-bar-primary @endif h-7" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:{{$interest->ratio}}%;">
                                                </div>
                                            </div>
                                            <span class="mdl-badge" data-badge="2"><b> {{$interest->name}}</b></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @include("modal.delteInterest")
                        @include("modal.updateInterest")
                    @endforeach
                </div>
                {{$interests->links()}}
            </div>