Laravel 5 ve AJAX yanıtları

Question

AJAX ve Laravel 5 ile sıkı bir iletişim kurmak istiyorum. Ajax ile veri göndermede ve arka uçta yayınlamada sorun yaşamadım. Ancak güncellenmiş verileri ele alma konusunda sorun yaşıyorum.

Bir örnek:

kullanıcı bir profil sayfasında kullanıcı adını değiştirebilir. Güncellenmiş kullanıcı adı ajax üzerinden gönderilir ve UserController'ın isteği yerine getirdiği backend'e gönderilir. Veritabanındaki verileri sakladıktan sonra yeni kullanıcı adı ön tarafa gönderilmelidir. Tek yol, return response()->json(['username' => $user->username]); 'u kullanmaktır. Ancak, her bir html öğesini, eski kullanıcı adının gösterildiği javascript ile bulup güncellemem gerektiğini biliyorum. Bu biraz geniş görünüyor (örneğin, navbar, sayfa başlığı vb.).

Başka bir yolu var mı? Örneğin, görünümün yalnızca bazı kısımlarını yeniden yükle? update-yöntemi ile

<script> 
    $(document).ready(function() { 
     $('#submit-userdatas').click(function() { 
      $.ajax({ 
       url: 'ajax/updateUserdata', 
       type: 'post', 
       data: { 
        '_token': $('input[name=_token]').val(), 
        'user_id': $('input[name=user_id]').val(), 
        'username': $('input[name=username]').val(), 
        'email': $('input[name=email]').val(), 
        'vorname': $('input[name=vorname]').val(), 
        'nachname': $('input[name=nachname]').val(), 
        'password': $('input[name=password]').val(), 
        'password_confirmation': $('input[name=password_confirmation]').val() 
       }, 
       dataType: 'json', 
       success: function (data) { 
        if (data.success) { 
         // find every element and replace the old username 
        } else { 
         // show some errors 
        } 
       } 
      }); 
     }); 
    }); 
</script> 

Benim UserController:

public static function updateUser($userdata = []){ 
    try{ 
     $user = self::findOrFail($userdata['user_id']); 
     foreach((array)$userdata as $key => $value){ 
      if(strlen($value) > 0){ 
       if($key == 'password'){ 
        $user->$key = bcrypt($value); 
       } else { 
        $user->$key = $value; 
       } 
      } 
     } 
     $user->save(); 
     return response()->json(['success' => true, 'username' => $user->username]); 
    } catch(ModelNotFoundException $ex){ 
     return response()->json(['success' => false, 'error' => $ex->getMessage()]); 
    } 
} 

Teşekkür

Bu benim ajax-işlevidir!

Answer 1

2 yönlü veri bağlama (köşeli, vue.js vb.) Ile ön uç bir çerçeve kullanmanın veya kendi yazmayı kullanmanın dışında, kullanıcı adlarını elle güncellemeniz gerekecektir.

<div class="header"> 
    <div class="user_container"> 
      <span data-field="username">John Smith</span> 
    </div> 
</div> 

<div class="body"> 
    Hello, <span data-field="username">John Smith</span> 
</div> 

Ve siz ajax gelen yanıt aldığınızda sadece özel alanı güncelleştirmek:

$(document).ready(function() { 
    $('#submit-userdatas').click(function() { 
     $.ajax({ 
      url: 'ajax/updateUserdata', 
      type: 'post', 
      data: data,     
      success: function (data) { 
       if (data.success) { 
        $("[data-field='username']").text(data.username); 
       } else { 
        // show some errors 
       } 
      } 
     }); 
    }); 
});