Envoyez au serveur PHP une requête AJAX
Posté : 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
Merci pour votre aide & bonne journée
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>
<!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>
<!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>
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();
})();