Ma solution avec Ajax ?

**bellemanche** · 28/07/2015, 13h00

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

.
Merci d'avance.

**NoSmoking** · 29/07/2015, 15h52

Bonjour et bienvenue sur DVP.
On peut te conseiller au moins les lectures suivantes

**bellemanche** · 29/07/2015, 16h05

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.

**NoSmoking** · 29/07/2015, 18h49

j'ai déja consulté 1000 pages

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

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 :

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

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 html :

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

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 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
<?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 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
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>

**bellemanche** · 29/07/2015, 20h27

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.

**NoSmoking** · 30/07/2015, 13h35

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 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
<?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 :

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

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 html :

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

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 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
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

Ma solution avec Ajax ?

AJAX

Discussions similaires

Partager

Partager