Ma solution avec Ajax ?

Version imprimable

28/07/2015, 13h00
bellemanche

Ma solution avec Ajax ?

Bonjoour a tous,
J'ait un formulaire Html avec 6 champs de saisies et quand j'ai rempli le premier champ (Ident),
je passe au suivant par tabulation, et la, je voudrais interroger une base Sql pour récupérer
3valeurs.
Et avec ces 3 valeurs, remplir 3 des 5 champs restants.
J'ai lu qu'avec Ajax, cela était possible, mais après plusieurs lectures, je n'y comprends rien !
Si vous pouvez m'aider j'en serai ravi :lol:.
Merci d'avance.
29/07/2015, 15h52
NoSmoking
Bonjour et bienvenue sur DVP.
On peut te conseiller au moins les lectures suivantes
- Comprendre les mécanismes d'AJAX
- Allez plus loin avec AJAX et XMLHttpRequest
29/07/2015, 16h05
bellemanche

Ma solution avec Ajax ?

Bonjour NoSmoking,

Merci de ta gentillesse, mais j'ai déja consulté 1000 pages je ne trouve pas l'info.

Pourtant avec un script Ajax, j'ai réussi a interroger ma base de donnée qui m'affiche
dans ma page d'appel les données en fonction de l'id saisie.

C'est la moitié du chemin !

Ce qui me manque c'est qu'au lieu d'addicher les données, c'est de mémoriser
les variables et de rafraichir la page avec ces valeurs.

Mais cela, pas trouvé...

Par contre dans le fichier qui lit les infos de la base, j'ai réussi a enregistrer les données
dans un fichier txt que je pourai lire dans ma page d'appel si elle se rafraichi !

J'aimerai bien une bonne piste.

Citation:

j'ai déja consulté 1000 pages

sûrement pas de la qualité de celles que je t'ai fournie :mouarf:

La technique ajax n'a rien de compliqué.

Voici un petit exemple minimaliste pour t'aider à mieux comprendre, enfin j’espère

La fonction qui fera la requête, demande d'affichage d'un article en passant en paramètre le numéro choisi et affichage au retour dans la DIV id="retour"

Code:

1
2
3
4
5
6
7
8
9
10
11
function getArticle(num) {
    var xhr = window['XMLHttpRequest'] ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    xhr.open('POST', 'article.php', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById('retour').innerHTML = xhr.responseText;
        }
    }
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send('article=' + num);
}

cette fonction est déclenchée sur l’événement onchange d'un <select>.

Code:

1
2
3
4
5
6
7
  <select onchange = "getArticle( this.value)">
    <option value="0">...</option>
    <option value="1">Article Un</option>
    <option value="2">Article Deux</option>
    <option value="3">Article Trois</option>
    <option value="4">Article Quatre</option>  
  </select>

Coté serveur on pourrait imaginer un fichier article.php comme suit

Code:

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
<?php
$mess = '';
$num = -1;
if( isset($_POST['article'])){
  $num  = $_POST['article'] -1;
}
$mess = '<h1>Article #' .($num +1).'</h1>';
switch ($num) {
  case 0:
    $mess  .= 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis.';
    break;
  case 1:
    $mess  .= 'Donec auctor, ex vitae laoreet mollis, ligula mauris tincidunt ex. ';
    break;
  case 2:
    $mess  .= 'Aliquam pharetra eget purus eget gravida. Donec a sapien pulvinar. ';
    break;
  case 3:
    $mess  .= '<ul><li>In et leo vitae eros tincidunt cursus.</li><li>Etiam dapibus sapien a eros dapibus, ac elementum augue posuere.</li></ul>';
    break;
  default:
    $mess  = '<span class="erreur">Erreur :</span><br>';
    $mess .= 'aucun article concerné !';
}
echo $mess;
?>

ce n'est bien sûr qu'un exemple minimaliste.

Si tu veux tester tout cela voici un fichier de test

Code:

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>
<head>
<title>Enter dans FORM</title>
<meta charset="UTF-8">
<style>
html, body{
  margin:0;
  padding:0;
  font-size:100%;
  font: 1em/1.5 Verdana, sans-serif;
}
#main{
  width:60em;
  margin:0 auto;
}
h1{
  color:#069;
}
#retour{
  margin:1em;
}
  #retour .erreur {
    color: red;
    font-size:1.25em;
    font-weight:bold;
  }
  #retour h1{
    font-size:1.5em;
    color:#C00;
  }
</style>
</head>
<body>
<div id="main">
  <h1>Exemple Ajax minimaliste</h1>
  <p>Sélectionnez un article
  <select onchange = "getArticle( this.value)">
    <option value="0">...</option>
    <option value="1">Article Un</option>
    <option value="2">Article Deux</option>
    <option value="3">Article Trois</option>
    <option value="4">Article Quatre</option>  
  </select>
  </p>
  <div id="retour"></div>
</div>
<script>
function getArticle( num){
  var xhr = window['XMLHttpRequest'] ? new XMLHttpRequest() :new ActiveXObject("Microsoft.XMLHTTP");
  xhr.open('POST', 'article.php', true);
  xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        document.getElementById('retour').innerHTML = xhr.responseText;
      }
    }
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
  xhr.send('article=' +num);
}
</script>
</body>
</html>

29/07/2015, 20h27
bellemanche

Ma solution avec Ajax ?

Bonsoir NoSmoking,

Merci, l'exemple tourne parfaitement.

Si vous pouviez me faire le mème avec 3 champ de saisie plutot
qu'un select pour rapatrier une donnée (voire des données !) pour
remplir d'autres champs automatiquement.

Le déclanchement de la fonction devra se produire sur le premier champ avec un "keydown"
et renseigner les autres.

Je comprends déjà beaucoup mieux le principe, mais je crois qu'un
nouvel exemple me comblerai.

Un ami m'avais conseillé ce site, et je ne suis pas déçu.

A vous lire.

Citation:

pour remplir d'autres champs automatiquement.

dans ce cas il faut que tu change la technique de récupération et de travailler avec la transmission d'un objet JSON.

Pour reprendre l'exemple précédent il te faudra utilisé le retour suivant

fichier json_article.php (toujours minimaliste)

Code:

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
<?php
$num = 0;
// Définition des articles
// pourrait être issus d'un BdD
$article = array(
  array(
    'titre'   => 'Oups !!',
    'contenu' => 'aucun article sélectionné !'
  ),
  array(
    'titre'   => 'Titre #1',
    'contenu' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis.'
  ),
  array(
    'titre'   => 'Titre #2',
    'contenu' => 'Donec auctor, ex vitae laoreet mollis, ligula mauris tincidunt ex.'
  ),
  array(
    'titre'   => 'Titre #3',
    'contenu' => 'Aliquam pharetra eget purus eget gravida. Donec a sapien pulvinar.'
  ),
  array(
    'titre'   => 'Titre #4',
    'contenu' => '<ul><li>In et leo vitae eros tincidunt cursus.</li><li>Etiam dapibus sapien a eros dapibus, ac elementum augue posuere.</li></ul>'
  )
);
if( isset( $_POST['article'])){
  $num = $_POST['article'];
  if( !isset( $article[$num])){
    $num = 0;
  }
}
// Retourne la représentation JSON d'un article
echo json_encode( $article[$num]);
?>

la différence va se jouer à la récupération et la fonction dans ce cas devient

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getArticle( num){
  var xhr = window['XMLHttpRequest'] ? new XMLHttpRequest() :new ActiveXObject("Microsoft.XMLHTTP");
  xhr.open('POST', 'json_article.php', true);
  xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        // parse la chaine pour obtenir un objet JSON
        var data = JSON.parse( xhr.responseText);
        // affectation des différents contenu
        document.getElementById('titre').innerHTML   = data.titre;
        document.getElementById('contenu').innerHTML = data.contenu;        
      }
    }
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
  xhr.send('article=' +num);
}

il faut bien sûr ajouter dans le HTML les éléments qui vont recevoir les informations, dans la <div id="retour"> par exemple

Code:

1
2
3
4
  <div id="retour">
    <h1  id="titre"></h1>
    <div id="contenu"></div>
  </div>

le reste ne change pas par rapport à l'exemple précédent.

Le fichier de test complet :

Code:

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
<!DOCTYPE HTML>
<html>
<head>
<title>Exemple Ajax minimaliste</title>
<meta charset="UTF-8">
<style>
html, body{
  margin:0;
  padding:0;
  font-size:100%;
  font: 1em/1.5 Verdana, sans-serif;
}
body {
/*  color :<?php echo $la_couleur ?>;/**/
}
#main{
  width:60em;
  margin:0 auto;
}
h1{
  color:#069;
}
#retour{
  margin:1em;
}
  #retour .erreur {
    color: red;
    font-size:1.25em;
    font-weight:bold;
  }
  #retour h1{
    font-size:1.5em;
    color:#C00;
  }
</style>
</head>
<body>
<div id="main">
  <h1>Exemple Ajax minimaliste</h1>
  <p>Sélectionnez un article
  <select onchange = "getArticle( this.value)">
    <option value="0">...</option>
    <option value="1">Article Un</option>
    <option value="2">Article Deux</option>
    <option value="3">Article Trois</option>
    <option value="4">Article Quatre</option>  
  </select>
  </p>
  <div id="retour">
    <h1  id="titre"></h1>
    <div id="contenu"></div>
  </div>
</div>
<script>
function getArticle( num){
  var xhr = window['XMLHttpRequest'] ? new XMLHttpRequest() :new ActiveXObject("Microsoft.XMLHTTP");
  xhr.open('POST', 'json_article.php', true);
  xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        // parse la chaine pour obtenir un objet JSON
        var data = JSON.parse( xhr.responseText);
        // affectation des différents contenu
        document.getElementById('titre').innerHTML   = data.titre;
        document.getElementById('contenu').innerHTML = data.contenu;        
      }
    }
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
  xhr.send('article=' +num);
}
</script>
</body>
</html>

Il te suffit d'adapter à ton besoin le principe étant là.

Je te recommande quand même la lecture de cette article très complet
• Ajax - une autocomplétion pas à pas