Laravel 5 and AJAX responses


Laravel 5 and AJAX responses

我想坚定使用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()]);
    }
}

谢谢!

除了使用具有双向数据绑定的前端框架(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
                }
            }
        });
    });
});