javascript - 直接在 View 中输出数据和消息

Question

我目前正在研究ajax，jquery和javascript。我有一点问题。

我可以使用此代码发送数据并将它们存储在数据库中。
但是，在我重新加载页面之前，在 View 中发送后数据不会直接显示。

如何在不重新加载页面的情况下直接在 View 中输出数据？

如何将错误和成功消息作为flashmessage(toastr)消息输出？

如何重写此有效的代码？我收到错误消息，它与选择器重复。

    $('#todolist-create-modal').modal('hide');
    $('#todolist-create-modal').on('keypress', ":input:not(textarea)", function(event) {
                        return event.keyCode != 13;
});

码

   <script type="application/javascript">
    $(document).ready(function () {
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

        $('#add-todo-list').click(function(e) {
            e.preventDefault();
            var _token = $("input[name='_token']").val(); // get csrf field.
            var title = $("input[name='title']").val();
            var description = $("textarea[name='description']").val();
            var privacy = $("select[name='privacy']").val();
            var listid = $("select[name='privcy']").val();
            $.ajax({
                url:'{{ route('todolists.store') }}',
                type: 'POST',
                data: {_token:_token, title:title, description:description, privacy:privacy},
                success: function (data) {
                    console.log(data);

                    if (privacy = 0) {

                        //go to the left side

                    } else {

                        //go to the right side

                    }
                },
                error: function(data){
                    console.log(data);
                }
        });
            $('#todolist-create-modal').modal('hide');
            $('#todolist-create-modal').on('keypress', ":input:not(textarea)", function(event) {
                return event.keyCode != 13;
            });
        });

    });
</script>

View

<div id="content" class="dashboard padding-10">
        <div class="row">
            <div class="col-md-offset-3 col-md-6">
                <a data-toggle="modal" data-target=".todolist-create-modal" class="btn btn-success btn-block btn-sm margin-bottom-10">Neue Liste erstellen</a>
            </div>
        <div class="col-md-6">
            <div id="panel-misc-portlet-l3" class="panel panel-default text-center">
                <div class="panel-heading nohover">
                    <span class="elipsis">
                        <strong>Öffentliche Tasks</strong>
                    </span>
                </div>
            </div>
            <div class="alert alert-danger margin-bottom-30 {{ $todolistpublic->count() ? 'hidden' : '' }}">
                Es wurden keine <strong>Einträge</strong> gefunden.
            </div>
            @foreach ($todolistpublic as $list)
                <div id="todo-list-{{$list->id}}" class="panel panel-default panel-primary margin-bottom-0">
                    <div class="panel-heading panel-pointer">
                            <span class="elipsis"><!-- panel title -->
                                <strong>{{ $list->title }}</strong> <span class="label label-info white">0</span>
                            </span>
                        <ul class="options pull-right relative list-unstyled hover-visible">
                            <li><a data-toggle="modal" data-target=".task-modal" class="btn btn-success btn-xs white hover-hidden">
                                    <i class="fa fa-plus"></i> Erstellen
                                </a>
                            </li>
                            <li><a data-toggle="modal" data-target=".todolist-modal" data-id="{{ $list->id }}" data-title="{{ $list->title }}" data-description="{{ $list->description }}" class="btn btn-info btn-xs white hover-hidden">
                                    <i class="fa fa-edit"></i> Bearbeiten
                                </a>
                            </li>
                            <li><a data-toggle="modal" data-target=".todolist-delete-modal" data-id="{{ $list->id }}" data-title="{{ $list->title }}" data-description="{{ $list->description }}" class="btn btn-danger btn-xs white hover-hidden">
                                    <i class="fa fa-times"></i> Löschen
                                </a>
                            </li>
                            <li><a href="#" class="opt panel_colapse" data-placement="bottom"></a></li>
                        </ul>
                    </div>
                    <div class="panel-body">
                        <div class="slimscroll" data-always-visible="false" data-rail-visible="false" data-railOpacity="1" data-height="100">
                            {{ $list->description }}
                        </div>
                    </div>
                </div>
            @endforeach
            <div class="panel-footer mtm-10">
                <span id="todo-list-counter-public">{{ $todolistpublic->count() }}</span> <span>{{ $todolistpublic->count() > 1? 'Listen' : 'Liste' }}</span>
            </div>
        </div>

        <div class="col-md-6">
            <div id="panel-misc-portlet-l3" class="panel panel-default text-center">
                <div class="panel-heading nohover">
                    <span class="elipsis">
                        <strong>Private Tasks</strong>
                    </span>
                </div>
            </div>
            <div class="alert alert-danger margin-bottom-30 {{ $todolistprivate->count() ? 'hidden' : '' }}">
                Es wurden keine <strong>Einträge</strong> gefunden.
            </div>
            @foreach ($todolistprivate as $list)
                <div id="todo-list-{{$list->id}}" class="panel panel-default panel-primary margin-bottom-0">
                    <div class="panel-heading panel-pointer">
                            <span class="elipsis"><!-- panel title -->
                                <strong>{{ $list->title }}</strong> <span class="label label-info white">0</span>
                            </span>
                        <ul class="options pull-right relative list-unstyled hover-visible">
                            <li><a data-toggle="modal" data-target=".task-modal" class="btn btn-success btn-xs white hover-hidden"><i class="fa fa-plus"></i> Erstellen</a></li>
                            <li><a data-toggle="modal" data-target=".todolist-modal" class="btn btn-info btn-xs white hover-hidden"><i class="fa fa-edit"></i> Bearbeiten</a></li>
                            <li><a href="#" class="btn btn-danger btn-xs white hover-hidden"><i class="fa fa-times"></i> Löschen</a></li>
                            <li><a href="#" class="opt panel_colapse" data-placement="bottom"></a></li>
                        </ul>
                    </div>
                    <div class="panel-body">
                        <div class="slimscroll" data-always-visible="false" data-rail-visible="false" data-railOpacity="1" data-height="100">
                            {{ $list->description }}
                        </div>
                    </div>
                </div>
            @endforeach
            <div class="panel-footer mtm-10">
                <span id="todo-list-counter-private">{{ $todolistprivate->count() }}</span> <span>{{ $todolistprivate->count() > 1? 'Listen' : 'Liste' }}</span>
            </div>
        </div>

        @include('elements.addTodoList')
        @include('elements.createTodoList')
        @include('elements.addTask')
    </div>
</div>

控制者

public function store(Request $request)
{
    $validator = Validator::make($request->all(), [
        'title' => 'required|min:5',
        'description' => 'required|min:10',
        'privacy' => 'required|integer'
    ]);

    $attributeNames = array(
        'title' => 'Title',
        'description' => 'Description',
    );
    $validator->setAttributeNames($attributeNames);
    //Redirect back if validation fails
    if($validator->fails()) {
        return response()->json(['error'=>$validator->errors()->all()]);
    }
    else{
        $todolists = new Todolists();
        $todolists->admin_id = Auth::id();
        $todolists->title = $request->title;
        $todolists->description = $request->description;
        $todolists->privacy = $request->privacy;
        $todolists->save();

        return response()->json(['Your enquiry has been successfully submitted!']);

    }

}

编辑

我已经修改并修改了代码。目前，我还有两个问题:

flashmessage仅输出为“空”。没有文字内容。问题出在哪儿？

div也被重新加载。但是在加载之后，我无法再次发送相同的请求。我是否需要重置某些内容或发生什么错误？

当我使用 console.log(data);在控制台中发布错误时，我收到以下错误消息:
{错误:Array(2)}
错误
:
(2)[“标题ist erforderlich。”，“描述ist erforderlich”。]

<script type="application/javascript">
    $(document).ready(function () {
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

        $('#add-todo-list').click(function(e) {
            e.preventDefault();
            $('.todolist-create-modal').on('keypress', ":input:not(textarea)", function(event) {
                return event.keyCode != 13;
            });

            var _token = $("input[name='_token']").val(); // get csrf field.
            var title = $("input[name='title']").val();
            var description = $("textarea[name='description']").val();
            var privacy = $("select[name='privacy']").val();
            $.ajax({
                url:'{{ route('todolists.store') }}',
                type: 'POST',
                data: {_token:_token, title:title, description:description, privacy:privacy},
                success: function (response) {
                    if (response.error) {
                        _toastr((response),"top-full-width","error",false);
                    }
                    else{
                        $('.todolist-create-modal').modal('hide');
                        $("#content").load(location.href+" #content>*","");
                        _toastr((response),"top-full-width","success",false);
                    }
                }
            });
        });
    });
</script>

Answer 1

问:如何在不重新加载页面的情况下直接在 View 中输出数据？

jQuery的一种方式是加载部分内容，这将再次请求页面，获取#content div的内容并替换HTML，而无需重新加载页面即可:

$("#content").load("/url-of-page > #content > *");

问:如何将错误和成功消息作为flashmessage(toastr)消息输出？

只需将消息写在HTML元素上:

success: function(data){
   $(".alert-danger").addClass("hidden");
   $(".alert-success").html(data.msg).removeClass("hidden");
},
error: function(data){
   $(".alert-success").addClass("hidden");
   $(".alert-danger").html(data.error).removeClass("hidden");
}