Bonjour,

J'ai créé un système de like avec php et je souhaite le transformer de façon asynchrone.

J'ai déjà créé tous le système pour envoyer les données au serveur.

Mais, quand je les envoie, je souhaiterais que les données s'actualise automatiquement sans recharger la page.

Je sais que je vais devoir récupérer mes données de manière asynchrone, mais je ne sais pas comment faire.

Pouvez-vous m'aider ?

Merci par avance,

Cordialement.

J'ai trouvez ceci :

  <script type="text/javascript">
  		var IdLike = "<?php echo($id)?>";

		function Update() {
			$.ajax({
				type: 'GET',
				url: '../../php/req-like.php?id='+IdLike,
				success: function(data) {
					$('#reqLike').html(data);
				}
			});
		}		 
		$('document').ready(function() {
			setInterval(function() { Update(); }, 1000);
		});
	</script>

mais, sa ne fonctionne pas

Slt.

Il faut que quand la personne like, tu fasses l'animation: s'il like, alors, tu changes les valeurs.

Ensuite, tu fais appelle à php.

Pourquoi ?: Si le client a une connexion lente, alors au moment ou il va liker, il ne verra pas tout de suite qu'il aura like. Du coup, il faut qu'il ait l'impression d'avoir like.

La suite:

Utilises l'api fetch pour l'asynchrone.

generateLike(1);

;(async()=>{
    let f = new FormData();
    f.append("like", 1) // $_POST["like"] == 1
    let r = await fetch("destination.php",{
        method:"POST",
        body:f
    });
    r = r.text(); // php: echo 1;
    
    generateLike(r);
})();

Tu vas me réponde: du coup le client like 2 fois. Or non, car toi tu vas avant récupérer ces données:

- est-ce que le client avait like ou pas ?

- combien de likes y'a t-il ?

Et tu stocks ces valeurs dans des variables constantes.

function generateLike(w){
    if (w){
        elmNbLike.textContent = nbLike+1 
    } else {
        elmNbLike.textContent = nbLike 
    }
}

Attention. Cette fonction n'est pas valide, ce n'est qu'un exemple. il y a encore certaines contraintes à prendre en compte.

Je te laisse faire tout cela. Tu verras par toi-même les contraintes de toute façon...

Bonjour,

Merci pour ta réponse,

Quand je clique, pour le moment, sa enleve ou ajoute à ma bdd, le seul truck qui cloche, c'est d'actualiser les valeur.

J'ai trouver quelque chose :

function actualiselikes(like) {
	$("#body").load("#duo-1");
};

sa fonctionne, sauf que sa recharge tous la page et pas uniquement la div #duo-1.

Bonjour,

Je sais, sa fait un petit moment, mais j'ai enfin réussie, j'ai juste un problème, c'est que sa parfois (la première fois) sa ne Synchronis pas.

J'ai cette erreur

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

Je doit donc réactualiser plusieurs fois  la page (2 fois) et cela seulement quand j'ai cette ligne :

<script src="../../js/like.js"></script>

function actualiselikes() {
  $('body').load("#likeFilm");
  $('body').load("#likeFilm");
}

PS : J'utilise Jquery 3.6.0

PS : J'arrive pas à mettre mon like.js

Merci pour votre aide.

Cordialement.

-
Edité par </Normandie Dèv> 10 mai 2021 à 19:04:55