Laravel 5 обновить HTML после AJAX post

Question

Итак, у меня есть сайт, на котором гости могут подписываться через модальную форму, это первый раз, когда я делаю это так голый со мной. Решение, которое я придумал, работает, но я чувствую, что это грязный/небезопасный способ сделать это. В макете макета я загружаю частичный вид, который содержит модальную форму.

Когда пользователь аутентифицирован, я обновляю навигационную панель, чтобы показать имя пользователя. это те части, где я немного смущен ... не было бы возможности «обновить» навигационную панель, которая также является частичным представлением.

Логин-modal.blade.php:

<div class="ui small modal" id="loginModal"> 
<div class="header"> 
    Login 
</div> 

<div class="ui active dimmer" id="loader" style="display: none"> 
    <div class="ui text loader">Loading</div> 
</div> 

<div class="content"> 
    <div class="ui grid"> 
     <div class="nine wide column centered"> 
      {!! Form::open(array('route' => 'auth.login', 'method' => 'post','id'=>'formLogin','class' => 'ui large form')) !!} 
      <meta name="csrf_token" content="{{ csrf_token() }}"/> 

      <div class="field {!! $errors->has('password') ? 'error' : '' !!}"> 
       <div class="ui left icon input"> 
        <i class="user icon"></i> 
        {!! Form::text('username','',['name'=>'username','id'=>'username','class' => 'pd','placeholder'=>'Username']) !!} 
       </div> 
       {!! $errors->first('username', '<span class="ui text" id="" style="color: #bf4d4b">:message</span>') !!} 
      </div> 
      <div class="field {!! $errors->has('password') ? 'error' : '' !!}"> 
       <div class="ui left icon input"> 
        <i class="lock icon"></i> 
        {!! Form::password('password',['name'=>'password','id'=>'password','class' => '','placeholder'=>'Password']) !!} 
       </div> 
       {!! $errors->first('password', '<span class="ui text" id="" style="color: #bf4d4b">:message</span>') !!} 
      </div> 
      {!! Form::submit('Login',['id'=>'loginButton','class'=>'ui fluid large teal submit button']) !!} 

      <div class="ui error message"></div> 

      {!! Form::close() !!} 
      <div class="ui message"> 
       No account? <a href="#"> Sign Up</a> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="actions"> 
</div> 
</div> 

теперь Javascript в том же файле:

<script> 
    $('#loginButton').click(function() { 
     $('#loginModal').modal(
       { 
        blurring: true, 
        closable: true, 
       }) 
       .modal('show'); 
    }); 

    $(document).ready(function() { 
     $('form#formLogin').submit(function (e) { 
      e.preventDefault(); 
      $.ajax({ 
       type: 'post', 
       timeout: 10000, 
       url: $('form#formLogin').attr('action'), 
       dataType: 'json', 
       data: $('form#formLogin').serialize(), 
       beforeSend: function (xhr) { 
        $('div#loader').show(); 
        var token = $('meta[name="csrf_token"]').attr('content'); 

        if (token) { 
         return xhr.setRequestHeader('X-CSRF-TOKEN', token); 
        } 
       }, 
       complete: function() { 
        $('div#loader').hide(); 
       }, 
       success: function (data) { 
        if (data.success == false) { 
         var errors = data.errors;           $('#loginModal').find('div.field.error').removeClass("field error").addClass("field"); 
         $('#loginModal').find('span').remove(); 
         $.each(errors, function (field, errormsg) { 

          if (errormsg.length != 0) { 

           var currentField = $('#loginModal').find('#' + field); 
           var currentFieldSpan = $('#loginModal').find('#span' + field); 

           if (currentFieldSpan.length > 0) { 
            $('#loginModal').find('div.field.error').removeClass("field error").addClass("field"); 
            $('#loginModal').find('span').remove(); 

           } 
           currentField.closest("div.field").removeClass("field").addClass("field error"); 
           $("<span class='ui text' id='span" + field + "' style='color: #bf4d4b'>" + errormsg + "</span>").insertAfter(currentField.closest("div.ui.left.icon.input")); 
          } 
         }); 
         if ((typeof data.locked != 'undefined') && data.locked.status == true) { 
          //BIDOUILLE pour disable le button login// 

          function enableLoginButton() { 
           $('#loginModal').find('#loginButton').removeClass('disabled'); 
          } 

          //disable login button 
          $('#loginModal').find('#loginButton').addClass('disabled'); 
          //after lockout time enable the login button again 
          setTimeout(enableLoginButton, (data.locked.remainingtime * 1000)); 

         } 
        } 
        else if (data.success == true) {//authentication was successful 

         var cnt = '<div class="ui simple dropdown item">' + 
           '<img class="logo" src="{{ asset('images/food.png') }}" style="margin-right: 1em">' + 
           data.user['username'] + 
           ' <i class="dropdown icon"></i>' + 
           '<div class="menu">' + 
           '<a class="item" href="#">Link Item</a>' + 
           '<a class="item" href="#">Link Item</a>' + 
           '<div class="divider"></div>' + 
           '<div class="header">Header Item</div>' + 
           '<div class="item">' + 
           '<i class="dropdown icon"></i>' + 
           'Sub Menu' + 
           '<div class="menu">' + 
           '<a class="item" href="#">Link Item</a>' + 
           '<a class="item" href="#">Link Item</a>' + 
           '</div>' + 
           '</div>' + 
           '<a class="item" href="#">Link Item</a>' + 
           '</div>' + 
           '</div>' 

         //remove the signin button 
         $('#navbartop .right .item').remove(); 
         //add the dropdown with username 
         $('#navbartop .right').append(cnt); 
         //dissmis modal 
         $('#loginModal').modal().modal('hide'); 
        } 
       }, 
       error: function (xhr) { 

        var validationerrors = xhr.responseJSON; 
        $('#loginModal').find('div.field.error').removeClass("field error").addClass("field"); 
        $('#loginModal').find('span').remove(); 
        $.each(validationerrors, function (field, errormsg) { 

         if (errormsg.length != 0) { 

          //select the field 
          var currentField = $('#loginModal').find('#' + field); 
          var currentFieldSpan = $('#loginModal').find('#span' + field); 

          if (currentFieldSpan.length > 0) { 
           $('#loginModal').find('div.field.error').removeClass("field error").addClass("field"); 
           $('#loginModal').find('span').remove(); 

          } 
          //apply 'field error' class to the closest div with 'field' class 
          currentField.closest("div.field").removeClass("field").addClass("field error"); 

          //appends a span with red text and the validation error message 
          $("<span class='ui text' id='span" + field + "' style='color: #bf4d4b'>" + errormsg + "</span>").insertAfter(currentField.closest("div.ui.left.icon.input")); 
         } 
        }); 
       } 
      }); 
      return false; 
     }); 
    }); 
</script> 

AuthController.php:

protected function handleUserWasAuthenticated(Request $request, $throttles) 
    { 

     if ($throttles) { 
      $this->clearLoginAttempts($request); 
     } 

     if (method_exists($this, 'authenticated')) { 
      return $this->authenticated($request, Auth::guard($this->getGuard())->user()); 
     } 

     //if user intended to access Logout() while not logged in, avoid instant redirect and logout 
     if (str_contains(redirect()->intended()->getTargetUrl(),'auth/logout')) { 
      return redirect()->route('home.index')->with('success', Auth::user()->username.' logged in successfully. '); 
     } 
     if($request->ajax()) 
     { 
      return Response::json(['success' => true, 'errors' => '','user'=> Auth::user()]); 
     } 
     return redirect()->intended($this->redirectPath())->with('success', Auth::user()->username.' logged in successfully. '); 
    } 
    public function login(Request $request) 
    { 


     $this->validateLogin($request); 

     // If the class is using the ThrottlesLogins trait, we can automatically throttle 
     // the login attempts for this application. We'll key this by the username and 
     // the IP address of the client making these requests into this application. 
     $throttles = $this->isUsingThrottlesLoginsTrait(); 

     if ($throttles && $lockedOut = $this->hasTooManyLoginAttempts($request)) { 
      $this->fireLockoutEvent($request); 

      return $this->sendLockoutResponse($request); 
     } 

     $credentials = $this->getCredentials($request); 

     if (Auth::guard($this->getGuard())->attempt($credentials, $request->has('remember'))) { 
      return $this->handleUserWasAuthenticated($request, $throttles); 
     } 

     // If the login attempt was unsuccessful we will increment the number of attempts 
     // to login and redirect the user back to the login form. Of course, when this 
     // user surpasses their maximum number of attempts they will get locked out. 
     if ($throttles && ! $lockedOut) { 
      $this->incrementLoginAttempts($request); 
     } 
     if($request->ajax()) 
     { 
      return Response::json(['success' => false, 'errors' => 
       [$this->loginUsername() => $this->getFailedLoginMessage()] 
      ]); 
     } 
     return $this->sendFailedLoginResponse($request); 


    } 
    protected function sendLockoutResponse(Request $request) 
    { 
     $seconds = app(RateLimiter::class)->availableIn(
      $this->getThrottleKey($request) 
     ); 

     if($request->ajax()) { 

       return Response::json(['success' => false, 
        'errors' => 
         [$this->loginUsername() => $this->getLockoutErrorMessage($seconds)], 
        'locked' => 
         ['status'=>true, 'remainingtime'=>$seconds]]); 

     } 

     return redirect()->back() 
      ->withInput($request->only($this->loginUsername(), 'remember')) 
      ->withErrors([ 
       $this->loginUsername() => $this->getLockoutErrorMessage($seconds), 
      ]); 
    } 

Answer 1

Я Оберните Navbar в DIV, как это:

<div id="ajax-nav"> 
<!-- Nav here --> 
</div> 

Тогда вы можете перезагрузить Navbar, когда ваш логин ответил успешно:

$('#ajax-nav').load("some url that returns the html of the navbar"); 

Тогда вам нужен только маршрут, который ведет к контроллеру, который может генерировать навигационную панель на основе состояния входа пользователя (вошедшего в систему или гостя).

С помощью этой процедуры вы можете полностью заменить содержимое навигационной панели новым сгенерированным после определенного события, такого как ваш успешный вход в систему, или вы даже можете установить интервал для обновления навигационной панели - но это не должно быть необходимо в вашем дело.

Answer 2

Я думаю, вы необходимо изменить эту строку:

'<img class="logo" src="{{ asset('images/food.png') }}" style="margin-right: 1em">' 

Для

'<img class="logo" src="{{ asset(\'images/food.png\') }}" style="margin-right: 1em">' 

Я надеюсь, что он работает;)