[AJAX] Listes liées Ajax : XMLHttpRequest ou Jquery ?

Invité · 27/08/2011, 11h31

Bonjour,
la question des listes liées revient souvent sur le forum.

1/ Quelle méthode privilégier/proposer/utiliser/conseiller ?
-> Ajax / XMLHttpRequest ?
-> Ajax / Jquery ?

2/ (Ajax / Jquery) va-t-il remplacer (Ajax / XMLHttpRequest) ?

3/ Si non, sur quels critères choisir l'une ou l'autre méthode ?

ps : les exemples ci-après fonctionnent très bien.

Exemple -> Ajax / XMLHttpRequest :
listeslieesXhr-test.php

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 	<title>Listes liées : Ajax - XMLHttpRequest</title>
 
	<script type="text/javascript">
	/* Initialisation XMLHttpRequest */
	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;
	};
 
	/* Changer la liste 2 après choix dans la liste 1 */
	function changeList2FromList1(id_lis1,id_div2){
		var id_lis1; // valeur de l option choisie (liste 1)
		var id_div2; // id du div qu'on remplira (liste 2)
 
		var xhr = getXhr();
		xhr.onreadystatechange = function(){
			// si on a tout reçu et que le serveur est ok
			if(xhr.readyState == 4 && xhr.status == 200)
			{
				texthtml = xhr.responseText;
				// On se sert de innerHTML pour rajouter les options a la liste des "selections"
				document.getElementById(id_div2).innerHTML = texthtml;
			}
		}
		// on defini la methode (post) + le fichier de traitement + asynchrone (true)
		xhr.open("POST","listeslieesAjax-test.php",true);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		// on poste les parametres a transmettre au fichier qui fera le traitement
		xhr.send("idlist1selected="+id_lis1);
	};
	</script>
 
</head>
 
<body>
 
	<form method="post" action="fichier-de-traitement.php">
	<fieldset style="width:550px;">
		<legend>Listes liées</legend>
		<p>
			<label>Liste 1 : </label>
			<select id="ididliste1" name="idliste1" onchange="changeList2FromList1(this.options[this.selectedIndex].value,'iddivListe2');">
			<!-- on appelle la fct sur le onchange (valeur-choisie, id-du-div-à-remplir) -->
				<option value="0">Choisissez ...</option>
				<option value="1">Métiers</option>
				<option value="2">Particuliers</option>
				<option value="3">Jardins</option>
			</select>	
		</p>
		<p>
			<label>Liste 2 : </label>
			<span id="iddivListe2"><!-- c'est ici que par innerHTML AJAX va ecrire la liste 2 -->
			<!-- on peut mettre d abord une option "par defaut" : -->
			<select id="ididliste2" name="idliste2">
				<option value="0">(Choisissez d'abord dans la liste 1)</option>
			</select>
			</span>	
		<p>
			<input type="submit" name="btenvoi" value="ok" />
		</p>
	</fieldset>
	</form>
 
</body>
</html>

Exemple -> Ajax / Jquery :
listeslieesJquery-test.php

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
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 	<title>Listes liées : Ajax - Jquery</title>
 
	<!-- Script initialisation jquery -->
	<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function () {
		/* Changer la liste 2 après choix dans la liste 1 */
		$('#ididliste1').change(function () {
			var id_lis1 = $('#ididliste1 option:selected').val(); // valeur de l option choisie (liste 1)
			var id_div2 = "iddivListe2"; // id du div qu'on remplira (liste 2)
			// Ajax avec Jquery
			$.ajax({
			 type: 'POST',
			 url: 'listeslieesAjax-test.php',
			 data: 'idlist1selected='+id_lis1,
			 dataType: 'html',
			 cache: false,
			 success: function(texthtml) {
				$('#'+id_div2).html(texthtml);
				return false; // arrêt de la propagation de l'évènement dans le DOM
			 }
			});
		});
	});
	</script>
 
</head>
 
<body>
 
	<form method="post" action="fichier-de-traitement.php">
	<fieldset style="width:550px;">
		<legend>Listes liées</legend>
		<p>
			<label>Liste 1 : </label>
			<select id="ididliste1" name="idliste1">
				<option value="0">Choisissez ...</option>
				<option value="1">Métiers</option>
				<option value="2">Particuliers</option>
				<option value="3">Jardins</option>
			</select>	
		</p>
		<p>
			<label>Liste 2 : </label>
			<span id="iddivListe2"><!-- c'est ici que par innerHTML AJAX va ecrire la liste 2 -->
			<!-- on peut mettre d abord une option "par defaut" : -->
			<select id="ididliste2" name="idliste2">
				<option value="0">(Choisissez d'abord dans la liste 1)</option>
			</select>
			</span>	
		<p>
			<input type="submit" name="btenvoi" value="ok" />
		</p>
	</fieldset>
	</form>
 
</body>
</html>

listeslieesAjax-test.php (commun, si vous souhaitez tester)

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
<?php 
// Ajax : affichage correct des accents
header('Content-Type: text/html; charset=ISO-8859-15');
// Ajax : Changer la liste 2 après choix dans la liste 1
if(isset($_POST['idlist1selected']) && is_numeric($_POST['idlist1selected']) && $_POST['idlist1selected']!=0)
{
 
        // recuperation de id_liste1
        $id_liste1_selected = intval($_POST['idlist1selected']);
?>
			<select id="id_selection" name="selection">
				<option value="0">Choisissez ...</option>
<?php if ($id_liste1_selected == 1) { ?>
				<option value="1">Boulanger</option>
				<option value="2">Plombier</option>
				<option value="3">Electricien</option>
<?php } elseif ($id_liste1_selected == 2) { ?>
				<option value="4">Vente Maisons</option>
				<option value="5">Locations Maisons</option>
<?php } elseif ($id_liste1_selected == 3) { ?>
				<option value="6">Entretien jardin</option>
				<option value="7">Pavage terrasse</option>
<?php } ?>
			</select>
<?php
} else {        // SI PAS de liste 1 choisie (0) ou erreur : on remet le select "par defaut" :
?>
			<select id="ididliste2" name="idliste2">
				<option value="0">(Choisissez d'abord dans la liste 1)</option>
			</select>
<?php
}
?>

[AJAX] Listes liées Ajax : XMLHttpRequest ou Jquery ?

AJAX

Mode arborescent

Discussions similaires

Partager

Partager