使用ajax jquery的laravel消息闪烁

Question

我有一个带有消息会话闪存的函数 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);
    }

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

          }
        });

    }

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