Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

Envoi d'une requête AJAX


Sujet :

AJAX

  1. #1
    Membre à l'essai
    Envoi d'une requête AJAX
    Bonjour, aucun message s'affiche. Voici mon code :

    index.php

    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
    <!DOCTYPE html>
     
    <html lang="fr">
     
    <head>
      <title>Correspondance américaine d'une note de musique</title>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="css/style.css">
      <script type="text/javascript" src="js/script.js"></script>
    </head>
     
    <body>
      <div id="wrapper">
        <header>
          <h1>Correspondance américaine d'une note de musique</h1>
        </header>
     
        <main>
          <button type="button" id="notation">notation</button>
          <button type="button" id="close">close</button>
          <div id="divphp"></div>
        </main>
      </div>
    </body>
     
    </html>


    page1.php

    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
    <!DOCTYPE html>
    <?php
    $notes = array("do" => "C", "ré" => "D", "mi" => "E", "fa" => "F", "sol" => "G", "la" => "A", "si" => "B");
    $message = "";
    if($_SERVER["REQUEST_METHOD"] == "POST") {
            if(empty($_POST["note_classique"])) {
                    $message = '<p class="error">Aucune note choisie !</p>';
        }
        else {
            $note = $_POST["note_classique"];
            $message = '<p class="success">La note américaine pour la note ' . $note . ' est ' . $notes[$note] . '</p>';
        }
    }
    ?>
    <html lang="fr">
    <head>
        <title>Correspondance américaine d’une note de musique</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
    	<h1>Correspondance des notes de musique classiques et anglaises</h1>
        <form action="note.php" method="post">
        	<fieldset>
        		<legend>Correspondance classique->anglaise</legend>
                <p>Choisissez une note: </p>
                <select name="note_classique">
                	<option value=""></option>
                	<?php foreach($notes as $note_classique => $note_americaine) {
                            echo '<option value="' . $note_americaine . '">' . $note_classique . '</option>';
                    }
                    ?>
                </select><br>
            </fieldset>
        </form>
        <div id="result">
            <?php echo $message; ?>
        </div>
    </body>
    </html>

    note.php
    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
    <!DOCTYPE html>
    <?php
    $notes = array("do" => "C", "ré" => "D", "mi" => "E", "fa" => "F", "sol" => "G", "la" => "A", "si" => "B");
    $message = "";
    if($_SERVER["REQUEST_METHOD"] == "POST") {
            if(empty($_POST["note_classique"])) {
                    $message = '<p class="error">Aucune note choisie !</p>';
        }
        else {
            $note = $_POST["note_classique"];
            $message = '<p class="success">La note américaine pour la note ' . $note . ' est ' . $notes[$note] . '</p>';
        }
        echo $message;
        return;
    }
    ?>
    <html lang="fr">
    <head>
        <title>Correspondance américaine d’une note de musique</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
    	<h1>Correspondance des notes de musique classiques et anglaises</h1>
        <form action="note.php" method="post" id="form">
        	<fieldset>
        		<legend>Correspondance classique->anglaise</legend>
                <p>Choisissez une note: </p>
                <select name="note_classique" id="note_classique">
                	<option value=""></option>
                	<?php foreach($notes as $note_classique => $note_americaine) {
                            echo '<option value="' . $note_americaine . '">' . $note_classique . '</option>';
                    }
                    ?>
                </select><br>
            </fieldset>
        </form>
        <div id="result">
            <?php echo $message; ?>
        </div>
    </body>
    </html>

    js/script.js
    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
     
    (function() {
      var poster = {
        init: function() {
          window.addEventListener("load", function(event) {
            var notation = document.getElementById("notation");
            notation.addEventListener("click", function(event) {
              event.preventDefault ? event.preventDefault() : event.returnValue = false;
              event.preventDefault();
              if(!document.getElementById("form")) {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.addEventListener("readystatechange", function(event) {
                  if(xmlhttp.readyState == 4) {
                    if(xmlhttp.status == 200) {
                      var div = document.getElementById("divphp");
                      div.innerHTML = xmlhttp.responseText;
                      var select = document.getElementById("select");
                      var form = document.getElementById("form");
                      select.addEventListener("change", function(event) {
                        event.preventDefault ? event.preventDefault() : event.returnValue = false;
                        event.preventDefault();
                        if(!form.note_classique.value) {
                          var div = document.getElementById("result");
                          div.innerHTML = "Aucune note choisie !";
                          div.style.color="red";
                          return;
                        }
                        var xmlhttp = new XMLHttpRequest();
                        xmlhttp.addEventListener("readystatechange", function(event) {
                          if(xmlhttp.readyState == 4) {
                            if(xmlhttp.status == "200") {
                              var div = document.getElementById("result");
                              div.innerHTML = xmlhttp.responseText;
                              div.style.color="black";
                            }
                            else {
                              alert("error code " + xmlhttp.status + " : " + xmlhttp.statusText);
                            }
                          }
                        });
                        xmlhttp.open("POST", form.action, true);
                        xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded; charset=UTF-8");
                        xmlhttp.send("note_classique=" + form.note_classique.value);
                      });
                    }
                    else {
                      alert("error code : " + xmlhttp.status + " : " + xmlhttp.statusText);
                    }
                  }
                });
                xmlhttp.open("GET", "note.php", true);
                xmlhttp.send();
              }
              else {
                document.getElementById("form").style.display = "block";
              }
              document.getElementById("notation").style.display = "none";
              document.getElementById("close").style.display = "block";
            });
            var close = document.getElementById("close");
            close.addEventListener("click", function() {
              document.getElementById("notation").style.display = "block";
              close.style.display = "none";
              document.getElementById("form").style.display = "none";
            });
        });
      }
    };
    poster.init();
    })();


    Merci pour votre aide & bonne soirée.

  2. #2
    Modérateur

    Bonjour,
    Bonjour, aucun message s'affiche.
    bizarre, aucune question ne s'affiche !

  3. #3
    Membre à l'essai
    non, rien s'affiche

  4. #4
    Membre à l'essai
    Bonjour, chez moi tout fonctionne maintenant.

    Merci bien & bonne journée.

###raw>template_hook.ano_emploi###