Laravel 5：如何在Ajax帖子後顯示消息並重定向

Question

我有一個簡單的博客帖子頁面，通過jQuery jQuery提交數據。 它工作正常，但目前，它提交後返回json響應。

我需要做的是在提交頁面上向用戶顯示成功消息，然後將他重定向到主文章頁面。

如果我註釋掉return Response::json($response);我收到一個空白頁，但我不想將他重定向到另一個視圖，我想向他顯示一條消息5秒鐘，然後重定向他。

而$("#ajaxResponse").append(msg);沒有做任何事情。

這是我的控制器

public function store(Requests\ArticleRequest $request) 
    { 

     $article = new Article($request->all()); 
     Auth::user()->articles()->save($article); 

     $response = array(
      'status' => 'success', 
      'msg' => 'Setting created successfully', 
     ); 

     return \Response::json($response); 
    } 

這是AJAX請求

$(document).ready(function() { 
    $('#submit').on('submit', function (e) { 
     e.preventDefault(); 
     var title = $('#title').val(); 
     var body = $('#body').val(); 
     var published_at = $('#published_at').val(); 
     $.ajax({ 
      type: "POST", 
      url: host + '/articles/create', 
      data: {title: title, body: body, published_at: published_at}, 
      success: function(msg) { 
       $("#ajaxResponse").append(msg); 
      } 
     }); 
    }); 
}); 

這就是你需要設置超時你會得到你的反應回來後視圖

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

<h1>Write a New Article</h1> 

<hr> 

{!! Form::open(['url' => 'articles']) !!} 
    <p> 
     {!! Form::label('title', 'Title:') !!} 
     {!! Form::text('title') !!} 
    </p> 

    <p> 
     {!! Form::label('body', 'Body:') !!} 
     {!! Form::textarea('body') !!} 
    </p> 

    <p> 
     {!! Form::label('published_at', 'Date:') !!} 
     {!! Form::input('date', 'published_at', date('Y-m-d'), ['class' => 'form-control']) !!} 
    </p> 

    <p> 
     {!! Form::submit('Submit Article', ['id' => 'submit']) !!} 
    </p> 
{!! Form::close() !!} 

<h3 id="ajaxResponse"></h3> 

@if($errors->any()) 
    <ul> 
    @foreach($errors->all() as $error) 
     <li>{{ $error }}</li> 
    @endforeach 
    </ul> 
@endif 

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="{{ URL::asset('assets/js/ArticleCreate.js') }}"></script> 

Answer 1

從服務器。試試這個並根據需要進行調整。看下面的例子。

return \Response::json($response); 

在你的js

$(document).ready(function() { 
    $('#submit').on('submit', function (e) { 
    e.preventDefault(); 
    var title = $('#title').val(); 
    var body = $('#body').val(); 
    var published_at = $('#published_at').val(); 
    $.ajax({ 
     type: "POST", 
     url: host + '/articles/create', 
     data: {title: title, body: body, published_at: published_at}, 
     success: function(data) { 
      console.log(data); 
      if(data.status == 'success') { 
       alert(data.msg); 
       setInterval(function() { 
       alert("Hello"); 
       }, 3000); 

      }else{ 
       alert('error'); 
       console.log(msg); 
      } 
     } 
    }); 
    }); 
}); 

根據需要進行調整來的Adpat你的代碼。

js fiddle example

$(document).ready(function() { 
    $('.alert-me').click(function() { 
    setInterval(function() { 
     alert("Hello"); 
    }, 3000); 
    }); 

});