Laravel 5 和 AJAX 响应

Question

我想坚定地使用 AJAX 和 Laravel 5。我通过 ajax 发送数据并发布到后端没有问题。但我在处理更新后的数据时遇到了问题。

一个例子：

用户可以在个人资料页面上更改他的用户名。更新的用户名通过 ajax 发送并发布到 UserController 处理请求的后端。将数据存储在数据库中后，应将新用户名发送到前端。 一种方法是使用return response()->json(['username' => $user->username]); 但是知道我必须使用显示旧用户名的 javascript 查找和更新每个 html 元素。这似乎有点广泛（例如在导航栏中，在页面标题等中）。

还有其他方法吗？例如仅重新加载视图的某些部分？

这是我的 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>

我的带有更新方法的用户控制器：

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 路数据绑定（angular、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
                }
            }
        });
    });
});