php - Laravel 5 和 AJAX 响应

Question

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

一个例子:

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

还有别的办法吗？例如，仅重新加载 View 的某些部分？

这是我的 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 路数据绑定(bind)(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
                }
            }
        });
    });
});