Tengo este enlace , que lo que hace mediante AJAX es dar un "me gusta" a la respuesta de un usuario.
Donde pone ${respuesta.likes}
muestro los likes de la respuesta.
La petición me la hace correctamente, es decir , me suma los "me gusta" a la respuesta, pero el problema esta en que no me cambia los "me gusta" que muestro por pantalla en ${respuesta.likes}
.
<span th:text="${respuesta.likes}"></span>
<a id="like" class="far fa-thumbs-up fa-lg colorIcono" th:href="${'/respuesta/like/' + respuesta.respuestaSuya.id + '/' + respuesta.id}"></a>
Aqui dejo el método AJAX
$(document).ready(function() {
$("#like").click(function(event) {
$.ajax({
url: $(event.target).attr("href"),
type: "GET",
beforeSend: function(xhr) {
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader("Content-Type", "application/json");
},
success: function(data) {
console.log("ok");
}
});
event.preventDefault();
});
Y el controlador que ejecuta la acción
@GetMapping(value = "/respuesta/like/{id}/{idRes}")
public String darLike(@PathVariable("id")Long id,@PathVariable("idRes")Long idRes){
Usuario user = repoUsuario.usuarioPorId(id);
Respuesta res = repoRespuesta.respuestaPorId(idRes);
user.setPuntos(user.getPuntos() + 1);
res.setPuntos(res.getPuntos() + 1);
res.setLikes(res.getLikes() + 1);
repoUsuario.save(user);
repoRespuesta.save(res);
return "redirect:/respuesta/respuesta/" + res.getPostRespuesta().getId();
}
success: function(data) { console.log("ok"); }
tienes que leerdata
, extraer la información que te manda el servidor y actualizar ahí la información del span.data
me devuelve toda la página en html, como podría acceder a la información necesaria ? @A.Cedanosuccess
buscar el valor en ese JSON. Supongamos que devuelves algo como esto desde el servidor:{ "id": 1 }
en la variabledata
delsuccess
, encontrarás el valor1
haciendo esto:data.id
.