Laravel 5 Ajax post

Question

Привет, мне очень тяжело приходится на новые структуры в laravel 5, я пытаюсь отправить форму через сообщение AJAX, но я продолжаю получать ошибку 422 (Bad Request). Я что-то упустил или мне нужно что-то сделать с моим классом Request? Вот мой код:

Контроллер:

public function login(LoginRequest $request) 
{ 

    if ($this->auth->attempt($request->only('email', 'password'))) 
    { 
     return redirect("/"); 
    } 

    return response()->json(['errors'=>$request->response]); 
} 

LoginRequest файл (я добавил метод пользовательский ответ, который является):

public function response(array $errors) 
{ 
    if ($this->ajax() || $this->wantsJson()) 
    { 
     return response()->json($errors, 422); 
    } 

    return response()->json($errors); 
} 

Мой Аякса код:

$("#form-login").submit(function(){ 

    var selector = $(this); 
    $.ajax({ 
    url: selector.attr("action"), 
    type: "post", 
    data: selector.serialize(), 
    dataType: "json", 
    }).done(function(data){ 
    console.log(data); 
    if(data.status == "failed"){ 
     alert("error"); 
    }else{ 
     alert("success"); 
    } 
    }); 

    return false; 
}); 

Так Моя проблема заключается в том, что когда я отправляю свою форму, которую я вижу на моей консоли, - не удалось загрузить ресурс: серверный ответ со статусом 422 (неверный запрос)

Пожалуйста, если кто-нибудь может помочь. Заранее спасибо!

Answer 1

Я на самом деле просто боролся с этим сам, и ответ довольно простой на самом деле.

Поскольку запрос Laravel реагирует с кодом состояния 422, успех JQuery в/сделано функции не срабатывают, а функция ошибки, видя, как это не 200.

Итак, для того, чтобы получить ответ JSON из вашего запроса AJAX генерируемой из объекта запроса из-за проверки упущение, необходимо определить обработчик ошибок, в вашем случае следующим образом:

$.ajax({ /* ... */ }) 
    .done(function(response) { /* ... */ }) 
    .error(function(data) { // the data parameter here is a jqXHR instance 
     var errors = data.responseJSON; 
     console.log('server errors',errors); 
    }); 

Answer 2

у меня была аналогичная проблема, я оставлю здесь код, который я в конечном итоге с.

форма:

<div class="container"> 
     <div class="text-center"> 
      <div class="title">{!!HTML::image("img/HERLOPS_Transparent_Blue.png") !!}</div> 
      {!! Form::open(['data-remote','url' => '/auth/login', 'class' => 'col-lg-4 col-lg-offset-4', 'id' => 'login_form']) !!} 

       <div class="form-group"> 
        <input type="email" class="form-control" id="email" name="email" placeholder="Your Email" value="{{ old('email') }}"> 
       </div> 
       <div class="form-group"> 
        <input type="password" class="form-control" id="password" name="password" placeholder="Your Password"> 
       </div> 
       <button id="submit" type="submit" class="btn btn-primary">Login <i class="fa fa-sign-in"></i></button> 
       <div style="clear:both"> 
        <a class="btn btn-link" href="{{ url('/password/email') }}">Forgot Your Password?</a> 
       </div> 

      {!! Form::close() !!} 
      <div style="text-align:center" class="col-lg-4 col-lg-offset-4" id="form-errors"></div> 
      <div style="clear:both"></div> 
      <div class="quote">{{ Inspiring::quote() }}</div> 
     </div> 
    </div> 

JQuery:

(function() { 
var submitAjaxRequest = function(e) { 

    var form = $(this); 

    var method = form.find('input[name="_method"]').val() || 'POST'; //Laravel Form::open() creates an input with name _method 

    $.ajax({ 

     type: method, 

     url: form.prop('action'), 

     data: form.serialize(), 

     success: function(NULL, NULL, jqXHR) { 
      if(jqXHR.status === 200) {//redirect if authenticated user. 
       $(location).prop('pathname', 'projects'); 
       console.log(data); 
      } 
     }, 
     error: function(data) { 
      if(data.status === 401) {//redirect if not authenticated user 
       $(location).prop('pathname', 'auth/login'); 
       var errors = data.responseJSON.msg; 
       errorsHtml = '<div class="alert alert-danger">'+errors+'</div>'; 
       $('#form-errors').html(errorsHtml); 
      } 
      if(data.status === 422) { 
      //process validation errors here. 
      var errors = data.responseJSON; 

      errorsHtml = '<div class="alert alert-danger"><ul>'; 

      $.each(errors , function(key, value) { 
       errorsHtml += '<li>' + value[0] + '</li>'; 
      }); 
      errorsHtml += '</ul></di>'; 

      $('#form-errors').html(errorsHtml); 
      } else { 

      } 
     } 
    }); 

    e.preventDefault(); 
}; 

$('form[data-remote]').on('submit', submitAjaxRequest); 
})(); 

И, наконец, метод контроллера, который обрабатывает запрос Аякса входа в систему,

/** 
* Handle an ajax login request to the application 
* 
* @param \Illuminate\Http\Request $request 
* @param \Illuminate\Http\Response 
*/ 
public function postLogin(Request $request) 
{ 
    $this->validate($request, [ 
     'email' => 'required|email', 'password' => 'required', 
    ]);// Returns response with validation errors if any, and 422 Status Code (Unprocessable Entity) 

    $credentials = $request->only('email', 'password'); 

    if ($this->auth->attempt($credentials)) 
    { 
     return response(['msg' => 'Login Successfull'], 200) // 200 Status Code: Standard response for successful HTTP request 
      ->header('Content-Type', 'application/json'); 
    } 

    return response(['msg' => $this->getFailedLoginMessage()], 401) // 401 Status Code: Forbidden, needs authentication 
      ->header('Content-Type', 'application/json'); 

}