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

Petit nouveau ! | 6 Messages

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

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 8518 Messages

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.
Quand tout le reste a échoué, lisez le mode d'emploi...

Petit nouveau ! | 6 Messages

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

Petit nouveau ! | 6 Messages

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

Mammouth du PHP | 1365 Messages

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

Petit nouveau ! | 6 Messages

05 août 2020, 10:49

Bonjour, chez moi tout fonctionne maintenant.

Merci bien & bonne journée.