Javascript 直接在视图中输出数据和消息

我目前正在研究ajax、jquery和javascript。我对它有点小问题

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

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

如何将错误和成功消息输出为flashmessage（toasrt）消息

---

我如何重写这段有效的代码？我收到一条错误消息，它是选择器的副本

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

---

代码

编辑

我已经修改和修改了代码。目前我还有两个问题：

flashmessage仅输出为“空”。没有文本内容。问题在哪里

div也会重新加载。但加载后，我无法再次发送相同的请求。我是否必须重置某些内容或错误是什么

当我使用

console.log（数据）在控制台中发布错误时我收到以下错误消息：
{错误：数组（2）}
错误
:
（2） [“标题是erforderlich.”，“描述是erforderlich.”


$（文档）.ready（函数（）{
var CSRF_TOKEN=$（'meta[name=“CSRF TOKEN”]”）。attr（'content'）；
$（“#添加待办事项列表”）。单击（函数（e）{
e、 预防默认值（）；
$（'.todolist create modal'）。在（'keypress'，“：input:not（textarea）”，函数（事件）{
return event.keyCode！=13；
});
var_-token=$（“输入[name=''u-token']”）。val（）；//获取csrf字段。
var title=$（“输入[name='title']”）val（）；
var description=$（“textarea[name='description']”）val（）；
var privacy=$（“选择[name='privacy']”）val（）；
$.ajax({
url:“{route（'todolists.store'）}}”，
键入：“POST”，
数据：{{u-token:{u-token，title:title，description:description，privacy:privacy}，
成功：功能（响应）{
if（response.error）{
_toastr（（响应），“顶部全宽”，“错误”，错误）；
}
否则{
$（'.todolist创建模式'）.model（'hide'）；
$（“#内容”）.load（location.href+“#content>*”，“”）；
_toastr（（回答），“顶部全宽”，“成功”，假）；
}
}
});
});
});
问：如何在不重新加载页面的情况下直接在视图中输出数据？

jQuery的一种方法是加载部分内容，这将再次请求页面，获取#content div的内容并替换HTML，快速且无需重新加载页面：

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


Q：如何将错误和成功消息输出为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");
}

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!']);

    }

}

<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>

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

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");
}