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>

我的UserController with update-method：

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

除了使用具有双向数据绑定（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
                }
            }
        });
    });
});

Laravel 5和AJAX响应

1 个答案: