使用ajax jquery的laravel消息闪烁

Posted 2023-02-26

【中文标题】使用ajax jquery的laravel消息闪烁

【英文标题】：Message flash with laravel using ajax jquery

【发布时间】：2018-01-22 23:09:59

【问题描述】：

我有一个带有消息会话闪存的函数 addProduct，我想使用 ajax jQuery 在 laravel 中通过会话闪存显示消息成功。

知道数据已保存到数据库而不显示闪烁消息

查看：

   <div class="col-md-12">
        @if(Session::has('message'))
         <p class="alert  Session::get('alert-class', 'alert-info') "> Session::get('message') </p>
      @endif
      @if(Session::has('alert-danger'))
      <p class="alert  Session::get('alert-class', 'alert-danger') "> Session::get('alert-danger') </p>
      @endif
      </div>
<script>
 $(document).ready(function() 
    $(document).on('click', "#add", function() 

        var codeProduct = $('#codeProduct').val();

            $.ajax(
              url: "addProduct",
              method: 'POST',
              data: 
                codeProduct: codeProduct
              ,
              success: function(data) 
              
            );
        
    );
</script>

控制器：

public function addProduct(Request $request)

        $product = new Product();
        $product->codeProduct = $request->codeProduct;
        $product->save();   

        Session::flash('success','Product Suucess!'); 

        return response()->json($product);
    

【参考方案1】：

您可以创建一个数组来保存您想要从 JSON 请求返回的数据。例如，您可以有以下变量：

成功 留言 数据

所以你的代码看起来像这样：

public function addProduct(Request $request)
    $status = false
    $message = "";

    $product = new Product();
    $product->codeProduct = $request->codeProduct;

    if ($product->save())
        $status = true;
     else 
        $message = "The product failed to load!";
    

    return response()->json([
        'status' => $status,
        'message' => $message,
        'data' => $product
    ]);

然后从您的 AJAX 请求中，您可以从响应中获取数据以及成功状态和消息：

var codeProduct = $('#codeProduct').val();

        $.ajax(
          url: "addProduct",
          method: 'POST',
          data: 
            codeProduct: codeProduct
          ,
          success: function(data) 

              var status = data.status;
              var message = data.message;
              var product = data.data;

          
        );

    

【参考方案2】：

像这样在成功函数中发出成功消息

这里忘记了控制器代码

if ($product->save()) 
   return response()->json(['data' => $product, 'success' => true, 'message' => 'success'], 200);
 else 
   return response()->json(['success' => false, 'message' => 'error'], 422);

首先，使用messages 类创建一个 div，然后使用 jquery 选择它

var messages = $('.messages');

现在创建一个名为successhtml 的变量并发出成功消息

var successHtml = '<div class="alert alert-success">'+
                '<button type="button" class="close" data-dismiss="alert">&times;</button>'+
                '<strong><i class="glyphicon glyphicon-ok-sign push-5-r"></</strong> '+ data.message +
                '</div>';

现在将successHtml 消息放入messages div

$(messages).html(successHtml);

所以你的代码应该是这样的

<div class="col-md-12">
        @if(Session::has('message'))
         <p class="alert  Session::get('alert-class', 'alert-info') "> Session::get('message') </p>
      @endif
      @if(Session::has('alert-danger'))
      <p class="alert  Session::get('alert-class', 'alert-danger') "> Session::get('alert-danger') </p>
      @endif
       <div class="messages"></div>
      </div>
<script>
 $(document).ready(function() 
    $(document).on('click', "#add", function() 

        var codeProduct = $('#codeProduct').val();

            $.ajax(
              url: "addProduct",
              method: 'POST',
              data: 
                codeProduct: codeProduct
              ,
              success: function(data) 
                var messages = $('.messages');

                var successHtml = '<div class="alert alert-success">'+
                '<button type="button" class="close" data-dismiss="alert">&times;</button>'+
                '<strong><i class="glyphicon glyphicon-ok-sign push-5-r"></</strong> '+ data.message +
                '</div>';

                $(messages).html(successHtml);

              
            );

        

    );
</script>

【讨论】：

有更好的方法吗？