[RESOLU] Envoyez au serveur PHP une requête AJAX

par **greg444** » 06 janv. 2021, 10:13

Bonjour, j'ai le même problème que toi ab1011, pourrai-je voir ton code fonctionnel stp?
Merci

par **ab1011** » 05 août 2020, 10:49

Bonjour, chez moi tout fonctionne maintenant.

Merci bien & bonne journée.

par **or 1** » 01 août 2020, 16:29

$notes = array("do" => "C", "ré" => "D", "mi" => "E", "fa" => "F", "sol" => "G", "la" => "A", "si" => "B");
echo $notes['E'];
echo $notes['mi']."<br>";
echo array_search('E', $notes);

cela donne :
NOTICE Undefined index: E on line number 3
E
mi

par **ab1011** » 01 août 2020, 10:40

Bonjour, j'ai réussi à trouver l'erreur ->

var select = document.getElementById("note_classique");
var form = document.getElementById("form");
select.addEventListener("change", function(event) {

mais maintenant j'ai cet erreur -> Notice: Undefined index: E in C:\wamp64\www\devoir 2\note.php on line 19

$message = '<p class="success">La note américaine pour la note ' . $note . ' est ' . $notes[$note] . '</p>';

par **ab1011** » 31 juil. 2020, 13:16

J'ai cet erreur quand je clique sur le bouton notation -> script.js:33 Uncaught TypeError: Cannot read property 'addEventListener' of null at XMLHttpRequest.<anonymous> (script.js:33)
(anonymous) @ script.js:33
XMLHttpRequest.send (async)
(anonymous) @ script.js:83

par **@rthur** » 31 juil. 2020, 10:33

Bonjour,

Il faut que tu avances dans ton débogage pour nous dire à quel niveau ça bloque.
Utilise la console de ton navigateur (Ctrl+Maj+i sur Firefox ou Chrome) puis onglet réseau pour voir si les requêtes ajax sont bien envoyées et quelle est leur réponse. Ainsi que l'onglet Console pour voir les éventuelles erreurs javascript.

par **ab1011** » 31 juil. 2020, 09:25

Bonjour, quand je sélectionne une note dans la liste déroulante, aucun message s'affiche. Voici mon code :

index.php

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

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

<!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 : Tout sélectionner

(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();

                    console.debug(select);
                    
                    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 journée

[RESOLU] Envoyez au serveur PHP une requête AJAX

Répondre

Étendre la vue Revue du sujet : [RESOLU] Envoyez au serveur PHP une requête AJAX

Re: [RESOLU] Envoyez au serveur PHP une requête AJAX

Re: Envoyez au serveur PHP une requête AJAX

Re: Envoyez au serveur PHP une requête AJAX

Re: Envoyez au serveur PHP une requête AJAX

Re: Envoyez au serveur PHP une requête AJAX

Re: Envoyez au serveur PHP une requête AJAX

Envoyez au serveur PHP une requête AJAX