Bonjour,
Le sujet auquel je fais référence dans le titre est résolu sur le fond avec AJAX et grâce aux conseils de ABCIWEB.

Toutefois, il me reste trois questions:
  1. Pourquoi mon code ne fonctionne pas sans arguments pour la méthode send() en mode post?
  2. ABCIWEB utilise un jeton qui m'intéresse pour protéger ma page AJAX mais je n'arrive pas à le faire fonctionner. Il s'affiche dans le champ 'token' (si le type est 'text') mais n'est pas transmis dans le $_POST. EDIT: J'ai trouvé, il fallait mettre ce jeton en argument du send() ce qui fait que ce point 2 rejoint le point 1 ci-dessus.
  3. Comment transmettre les variables au formulaire sans passer par un argument dans le exit()?


Voici le code source (ctrl+U) de ma page formulaire:
Code html : 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
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
		<meta http-equiv="Expires" content="-1" />
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
 
		<base href="http://racine.local" />
 
		<link rel="stylesheet" media="all" type="text/css" href="../css/structure.css" />
		<link rel="stylesheet" media="all" type="text/css" href="../css/screen.css" />
		<link rel="stylesheet" media="print" type="text/css" href="../css/print.css" />
	</head>
 
	<body>
 
<form method="post" name="tabForm">
		<input type="hidden" id="id0" name="id" value="3011">
	<input type="hidden" name="token" value="89e5da68bf3988022f92f40f7e56054ae5d4dd1a2a037167">
<div class="formFlex">
		<fieldset><legend>Activités répertoriées</legend>
			<p class="note">
				du texte.
			</p>
			<fieldset><legend>Zone d'édition&nbsp;: Sélection d'une activité</legend>
				<label for="naf1">Section</label><select name='naf[1]' id='naf1' required='required'><option value='' label='&lt; ---- &gt;'></option><option value='1'>SECTION A - AGRICULTURE, SYLVICULTURE ET PÊCHE</option><option value='2'>SECTION B - INDUSTRIES EXTRACTIVES</option></select><br>
				<label for="naf2">Division</label><select name='naf[2]' id='naf2'><option value='' label='&lt; ---- &gt;'></option></select><br>
				<label for="naf3">Groupe</label><select name='naf[3]' id='naf3'><option value='' label='&lt; ---- &gt;'></option></select><br>
				<label for="naf4">Activité</label><select name='naf[4]' id='naf4'><option value='' label='&lt; ---- &gt;'></option></select><br>
			</fieldset>
 
	</div>
</form>
 
<script type="module" src="../js/customerActivitiesHandler.js"></script>
 
	</body>
</html>
Fichier "../js/customerActivitiesHandler.js
Code JS : 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
const
	nafs	= document.querySelectorAll("[id*='naf']")
	,root	= window.location.origin
	;
 
console.log(nafs);
 
function handleChange(lastList, idx) {
	var xhr = new XMLHttpRequest()
		;
 
	xhr.onreadystatechange = function(){
		if (xhr.readyState == 4 && xhr.status == 200){
			console.log(xhr.responseText);
			nafs[idx].innerHTML = xhr.responseText;
		}
	}
	xhr.open('POST', root+'/frontend/customerActivityAjax.php', true);
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // necessary for postmode
	xhr.send(lastList.name+'='+lastList.value);
	//xhr.send(); // Ne fonctionne pas. Pourquoi?
}
 
if (nafs.length){
	nafs.forEach(function(curNaf, index){
		curNaf.addEventListener('change', function(e){
			handleChange(curNaf,index+1);
		}, false );
	});
}
Et mon fichier Ajax:
Code php : 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
<?php
 
require_once('../classes/moimp/OptListSelect.php'); // permet de créer une liste d'options <select>
require_once('../classes/moimp/OptListOption.php'); // permet de créer une option de liste <option>
require_once('../config.php');
require_once('../model/model.php');
 
if ( empty(session_id()) )
	session_start();
 
use OptListSelect\OptListSelect;
use OptListOption\OptListOption;
 
var_export($_POST);echo "\r\n\r\n"; // Ne renvoie pas le jeton
var_export($_SESSION['tokenLists']);echo "\r\n\r\n";
$token = isset($_POST['token']) ? $_POST['token'] : null;
var_export($token);
if(!isset($_SESSION['tokenLists'][$token])) exit('token invalide'); // Voir le mode de sortie, voir pourquoi le jeton n'est pas reconnu.
 
function doNafList(int $iPrevLevel){
	$language = $_SESSION['language'];
 
	$iNewLevel	= $iPrevLevel+1;
	$iPrevId	= $_POST['naf'][$iPrevLevel];
	$data		= getNAF($language, $iNewLevel, $iPrevId);
	$lst		= new OptListSelect("naf[$iNewLevel]", ['id'=>"naf$iNewLevel", 'required'=>'required']);
	$lst->addOption(new OptListOption('', '', ['label'=>getDBText($language,16)]));
	if (!empty($data)){
		foreach($data as $aItem){
			$lst->addOption(new OptListOption($aItem['id'], $aItem['code'].' - '.$aItem[$language.'_text']));
		}
		unset($aItem);
	}
	return $lst;
}
 
for ($i=1;$i<5;$i++){
	if (isset($_POST['naf'][$i])){
		$lstNaf[$i+1] = doNafList($i);
		exit($lstNaf[$i+1]);
	}
}
var_export($_POST['naf']);