如何在视图上显示带有ajax请求的Flash消息?

时间:2018-12-26 11:00:19

标签: php ajax laravel

当我在summernote中添加文本时,它将保存在数据库中并重新加载页面。我想在页面刷新“成功发送”之后在顶部显示消息。我如何添加带有ajax请求的Flash消息? 我已经发布了我的视图ajax和控制器代码。 我如何查看信息?

视图:

 @if (Session::has('error'))
    <div class="alert alert-danger">
        {{ Session::get('error') }}
    </div>
@endif
@if (Session::has('success'))
    <div class="alert alert-success">
        {{ Session::get('success') }}
    </div>
@endif

<div class="row">
    <div class="col-xl-12 col-md-12 col-sm-12">
        <div class="card">
            <div class="card-header">

                <h4 class="card-title">Contact Driver</h4>
                @if($successmessage = Session::get('allsuccess'))
                    <div class="alert alert-success alert-block" style="width:300px;">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <strong>{{ $successmessage }} </strong>
                    </div>

                @endif
            </div>

Ajax:

     $.ajax({
            url: "{{url('/add_contact_driver')}}",
            type: 'POST',
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            success: function (response) {
                console.log('response', response)
                window.location.reload();
            }, error: function (error) {
                console.log('create article error', error);
            }
        });

控制器:

     public function contactDriver(Request $request)
{

    $opn = $request->input('search_opn');
    $name = $request->input('search_name');
    $city = $request->input('search_city');
    $editor = $request->input('editor');
    $validation = Validator::make($request->all(), [
        'select_reason' => 'required'
    ]);
    if ($validation->fails()) {
        $response = (new ApiMessageController())->validatemessage($validation->errors()->first());
    } else {
        $contact = new ContactDriver();
        $contact->opn = $opn;
        $contact->name = $name;
        $contact->city = $city;
        $contact->text = $editor;
        $saveContact = $contact->save();

        if ($saveContact) {
            $response = (new ApiMessageController())->saveresponse("Send Successfully");
        } else {
            $response = (new ApiMessageController())->failedresponse(" Failed to send");
        }
    }
    return $response;

}

4 个答案:

答案 0 :(得分:1)

您可以这样做

 success: function (response) {
            console.log('response', response);
            $(".alert-success").css("display", "block");
            $(".alert-success").append("<P>This is a message");
        }

<div class="alert alert-success" style="display:none">
    {{ Session::get('success') }}
</div>

答案 1 :(得分:1)

有两种方法。

1)如果要重新加载页面,请从Controller本身设置成功消息,如下所示:

Session::flash('success', 'This is a message!'); 

然后在视图文件中访问此成功消息,如下所示:

2)通过从控制器返回消息并借助Jquery(在Ajax的Success Function中)显示消息。

$.ajax({
    url: "{{url('/add_contact_driver')}}",
    type: 'POST',
    data: formData,
    dataType: 'json',
    contentType: false,
    processData: false,
    success: function (response) {
        console.log('response', response)
        //window.location.reload();
        $("#YOUR MESSAGE DIV").html(response.message);//Assuming the response object contains the Variable as message.
    }, error: function (error) {
        console.log('create article error', error);
    }
});

答案 2 :(得分:1)

您可以在控制器中返回类似这样的错误/成功消息

return response()->json(['status'=>'error','message'=>'Error Occured']);

return response()->json(['status'=>'error','message'=>'Succesfully Send']);

现在输入您的Ajax代码,

在ajax调用上附加错误消息框。

 $.ajax({
        url: "{{url('/add_contact_driver')}}",
        type: 'POST',
        data: formData,
        dataType: 'json',
        contentType: false,
        processData: false,
        success: function(result) {
              console.log(result);
              $('#message').html('');
              if(result.status=='success'){
                $('#message').append(
                  '<div class="alert alert-success alert-dismissable">'+
                    '<button type="button" class="close" data-dismiss="alert">'+
                        '<span aria-hidden="true">&times;</span>'+
                        '<span class="sr-only">Close</span>'+
                    '</button>'+
                    result.message+
                  '</div>'
                );
              }else{
                $('#message').append(
                  '<div class="alert alert-danger alert-dismissable">'+
                    '<button type="button" class="close" data-dismiss="alert">'+
                        '<span aria-hidden="true">&times;</span>'+
                        '<span class="sr-only">Close</span>'+
                    '</button>'+
                    result.message+
                  '</div>'
                );
              }
          },
          error: function(result){
              console.log(result);
              alert('Something went wrong');
          }
      });

在要显示错误的位置添加以下html

<div id="message"></div>

希望您能理解

答案 3 :(得分:1)

你能做的是

    <div class="alert alert-danger" id="error-div" {{ Session::has('error') ? style="display:block" : style="display:none" }}>
        {{ Session::get('error') }}
    </div>

    <div class="alert alert-success" id="success-div" {{ Session::has('success') ? style="display:block" : style="display:none" }}>
        {{ Session::get('success') }}
    </div>

将响应设置为div

            success: function (response) {
                console.log('response', response)
                $('#success-div').show();
                $('#success-div').html(response);
            }, error: function (error) {
                console.log('create article error', error);
                $('#error-div').show();
                $('#error-div').html
            }