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