[AJAX] Simplement rafraichir une page avec un post

Invité · 13/03/2015, 16h46

Bonjour

Pour un projet perso. j'ai envi d'essayé AJAX mais malgré le cour j'ai beaucoup de mal a comprendre.

Pour l'instant je transmet une valeur dans un $_post pour incrémenter la base de +1 (un like de plus)

Voilà le code que j'utilise :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$page_texte .= '<form id="like" action="index.' . EXT . '?page=Article&amp;id=' . $_GET['id'] . '" method="post"><input type="hidden" name="like" value="like" /></form><a href="#" onclick="document.getElementById(\'like\').submit()"><i class="icon-thumbs-up"></i></a> <strong>' . $row['article_like'] . '</strong> ';
if ( $row['article_like'] > 1 ) {
        $page_texte .= 'Likes';
}
else {
        $page_texte .= 'Like';
}
$page_texte .= '</small></blockquote>';

Ensuite sur LA MEME PAGE :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
if ( isset ( $_POST['like'] ) ) {
$sql = "UPDATE " . $database->pref . "article_article
	   SET article_like = article_like + 1
	   WHERE article_id = '" . $_GET['id'] . "';";
$database->Requete ( $sql ) or $database->Erreur ( __LINE__ , __FILE__ , $sql );
$page_texte .= '<script language=javascript>window.history.go(-1);</script>';
}

Donc le rafraichissement ce fait par javascrip mais le soucis c'est que je réactualise la page entière.
Par rapport au http://siddh.developpez.com/articles/ajax/ je pense qu'il faut que j'utilse cette partie de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function getXhr(){
    var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
		xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	else { // XMLHttpRequest non supporté par le navigateur 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	} 
        return xhr
}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
	var xhr = getXhr()
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			alert(xhr.responseText);
		}
	}
	xhr.open("GET","ajax.php",true);
	xhr.send(null);
}

Le soucis qui se pose a moi c'est sur cette partie de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
xhr.open("GET","ajax.php",true);
xhr.send(null);

Comment faire vu que je travaille sur une seule page pour faire l'actualisation ?
Je ne sais pas si je résonne logiquement .... ?????
Merci

**dev14** · 13/03/2015, 16h56

Salut,

le principe avec Ajax, c'est de ne pas à avoir à recharger la page pour taper dans une base de données (par exemple). Le mieux est que t'inspires d'un exemple et que tu le décortiques. C'est pas amusant au début, mais après tu comprendras tout. Avec un petit exemple que tu trouveras sur developpez.net.

Invité · 13/03/2015, 17h00

Merci pour t'as réponse !
Justement je fais le tour du forum afin de décelé un exemple simple mais tous utilisent des fichiers différents !
C'est un truc de fou ou je suis vraiment mauvais au niveau compréhension soit je n'arrive pas a comprendre le fonctionnement !
Pas grave je vais fouiller encore sur Google et essayer de trouver un truc qui ce rapproche de ce que je veux faire.

**dev14** · 13/03/2015, 17h39

Malheureusement, si tu voulais utiliser un seul fichier, en effet ça risque d'être indigeste, je ne l'ai jamais vu faire.

L'idéal est d'avoir ton fichier de front office qui génère ton html vu l'écran : page.php et dans lequel tu déclencheras les actions qui utilisent ajax, ça peut être un onclick, onkeypress, etc.. suivant si tu utilises jquery aussi,

la page.php inclus un javascript page.js,

dans la page.js, tu as ton objet xmlhttprequest où là inutile de l'apprendre par coeur, il faut le piocher sur un code source.

Et enfin, dans ta page.js, un appel à une autre page php avec des arguments en paramètres (transmis par l'action de la page.php), par exemple bdd.php, dans laquelle tu fais ta requête php, et tu renvoies les résultats au format xml que page.js récupère et renvoie sur un élément ciblé page.php.

Mais le mieux c'est de prendre un exemple

Et le mieux aussi, c'est d'utiliser 3 fichiers

Invité · 13/03/2015, 17h58

En allant par là oui j'utilise plusieurs page

En fait j'ai une page tpl pour le Template ou j'inclus mes jquery etc ... qui gère le html en somme !
Ensuite j'ai un fichier fonction.js
ensuite j'ai ma page article.php celle là même ou je veux faire ce rafraichissement.

Dans ma page article c'est bien là que je fait l'insertion dans ma bdd lorsque je clique sur le lien pour faire un +1

donc j'ai bien mon bouton

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
$page_texte .= '<form id="like" action="index.' . EXT . '?page=Article&amp;id=' . $_GET['id'] . '" method="post"><input type="hidden" name="like" value="like" /></form><a href="#" onclick="submitForm()"><i class="icon-thumbs-up"></i></a> <strong>' . $row['article_like'] . '</strong> ';//document.getElementById(\'like\').submit()"
 
	if ( $row['article_like'] > 1 ) {
        $page_texte .= 'Likes';
    }
    else {
        $page_texte .= 'Like';
    }
	$page_texte .= '</small></blockquote></div>';

c'est là aussi que je retrouve mon affichage !

ensuite sur cette page j'ai aussi l'insertion en bdd :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
if ( isset ( $_POST['like'] ) ) {
 
$sql = "UPDATE " . $database->pref . "article_article
	   SET article_like = article_like + 1
	   WHERE article_id = '" . $_GET['id'] . "';";
 
$database->Requete ( $sql ) or $database->Erreur ( __LINE__ , __FILE__ , $sql );
}

Donc si je comprend bien il faut que je mette ma fonction ajax dans mon fichier fonction.js afin de pouvoir faire l'appel vers la page article ??????? là j'ai du mal

la fonction c'est quelque chose comme ça ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
	<script language="JavaScript">
 
	function submitForm()
	{ 
		var req = null; 
 
		document.getElementById("like").innerHTML = "Started...";
 
		if (window.XMLHttpRequest)
		{
 			req = new XMLHttpRequest();
			if (req.overrideMimeType) 
			{
				req.overrideMimeType(\'text/xml\');
			}
		} 
		else if (window.ActiveXObject) 
		{
			try {
				req = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e)
			{
				try {
					req = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {}
			}
	   	}
 
 
 
		req.onreadystatechange = function()
		{ 
			document.getElementById("like").innerHTML = "Wait server...";
			if(req.readyState == 4)
			{
				if(req.status == 200)
				{
					document.getElementById("like").innerHTML  = "Reçu: " + req.responseText;	
				}	
				else	
				{
					document.getElementById("like").innerHTML="Error: returned status code " + req.status + " " + req.statusText;
				}	
			} 
		};
		xhr.open("POST", url, true);		
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.send(null); 
	} 
	</script>

**dev14** · 13/03/2015, 19h05

C'est difficile de voir ce qui se passe sans accès à une page en ligne.

Mais tu peux suivre ce tutoriel ou celui-ci, je n'ai pas exactement trouvé ce que je voulais sur le forum.

Par contre, ce lien avec un cas concret est vraiment à voir, il n'utilise que deux fichiers (inclusion du js dans la page template), après c'est les goûts de chacun.

=> http://www.w3schools.com/php/php_ajax_database.asp

Il est minimaliste, ce qui aide à bien comprendre.

[AJAX] Simplement rafraichir une page avec un post

AJAX

Vue hybride

Discussions similaires

Partager

Partager