javascript - 使用 Laravel 从 AJAX 提交中返回验证和成功的闪现消息

Question

经过研究后，我了解到使用了 JSON，但我不确定该过程。下面的代码是我的 AJAX，控制台日志 after.done 当前无法工作，但是当我作为 AJAX 对象的一部分成功时它就可以工作。

AJAX

      $(document).on('click', '#button', function() {
      var wrap = $(this).closest('div.form_wrap');
      wrap.find('form').each(function() {

          var id = $(this).prop('id');
          var arr = jQuery.makeArray( "#"+id );
          var url = $(this).attr('action');
          var type = $(this).attr('method');
          var i = $('#'+id); // Or just $(this)
          var data = i.serialize();

    // setup on submit 
          i.submit(function(event) {
        event.preventDefault();
        var formElem = $(event.currentTarget);

    console.log(data);
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

              $.ajax({
                  type        : type, 
                  url         : url, 
                  data        : data,
                  dataType    : 'json',
                  encode      : true
                })
                  .done(function(data) {              
                      console.log(data);         
                  });     
        });

        i.submit();
      });
        });

Controller

public function store(Request $request)
    {

        //validate
        $this->validate($request, array (
            //'exercise' => 'required|unique:workout_goals,user_id,NULL,id,exercise,'.$request->exercise,
            //'reps' => 'required|integer',
            //'exercise' => 'required|unique:workout_goals,exercise,NULL,id,user_id,'.$request->user_id,          
        ));

        //store
        $post = new workout_shared;
        $post->date = $request->date;
        $post->user_id = $request->user_id;
        //$post->shared_id = $request->shared_id;
        $post->exercise = $request->exercise;
        $post->weight = Input::get( 'weight' );
        $post->reps = $request->reps;
        $post->sets = $request->sets; 

        //save
        $post->save();


        //session flash message
        Session::flash('success','Workout shared!');

        //redirect


        return back();
    }

谢谢

Answer 1

$.done 仅在成功的 ajax 调用后才会被调用，因此您在调用该 url 时可能会收到错误。使用 $.fail 捕获此错误:

$.ajax(...)
 .done(function(){ console.log("Done!"); })
 .fail(function(jqXHR, textStatus, errorThrown){ 
    console.log("Fail!", jqXHR, textStatus, errorThrown); 
 });

设置 Session::flash() 会将此消息存储在下一个 http 请求的 session 中，要检索此消息，请在显示的下一页上使用此消息:

Session::pull(...)

但是，当您使用 ajax 调用时，您将需要按照您所说的以 JSON 形式返回消息。我还建议按照此方法处理您的 save 方法，然后根据该方法的调用方式实现 flash 消息或 json:

...

// Save 
$result = $post->save(); // return a boolean for success/fail
$message = $result ? "Workout shared!" : "Workout sharing failed!";

// Response
if ($request->ajax())
{
    // Ajax response, will translate to JSON
    return new Array(
       'Success' => $result,
       'Message' => $message
    );
}

// Regular Http response
Session::flash('save-response', $message);

// Redirect
...

进一步的步骤是将此代码的整个响应部分提取到一个新方法，该方法也可以在验证后使用，例如:

WorkoutSaveResponse($result, $message)