Laravel 5とAJAXの応答

Question

私はAJAXとLaravel 5を使用したいと思います。私はajax経由でデータを送信し、バックエンドに投稿することに問題はありません。しかし、私は更新されたデータを扱う際に問題があります。

例：

ユーザーは、プロファイルページでユーザー名を変更できます。更新されたユーザー名はajax経由で送信され、UserControllerがリクエストを処理するバックエンドにポストされます。データベースにデータを保存した後、新しいユーザー名をフロントエンドに送信する必要があります。 1つの方法は、return response()->json(['username' => $user->username]); を使用することですが、私は古いユーザー名が表示されているjavascriptですべてのhtml要素を見つけて更新する必要があることを知っています。これは少し広範囲に及んでいるようです（たとえば、navbar、page-titleなど）。

他の方法はありますか？たとえば、ビューの一部だけをリロードしますか？

これは私のAJAX機能である：更新方法と

<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> 

マイ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()]); 
    } 
} 

ありがとう！

Answer 1

2方向データバインディング（角度、vue.jsなど）を使用しているフロントエンドフレームワークの外、または独自のユーザーネームを手動で更新する必要があります。自分でこれを簡単にするためには、カスタム属性を使用してスパン内のすべてのユーザー名をラップすることができます：

<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> 

そして、あなたはあなたのAJAXからの応答を受信したときにちょうどカスタムフィールド更新：

$(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 
       } 
      } 
     }); 
    }); 
});