Precisamente en estos días estaba jugando con las funciones asíncronas y parece que han conseguido endulzar un poco el AJAX.
He construido un dataset básico:
CREATE TABLE diegomedina(
id int AUTO_INCREMENT PRIMARY KEY,
acierto int,
instante timestamp
);
Y he añadido un poco de código a tu formulario:
<?php
if(isset($_GET['acierto'])){
$conn = new mysqli('localhost','root','','stackoverflow');
sleep(2);
if($conn->query("
INSERT INTO diegomedina (acierto) VALUES (
".($_GET['acierto']*1)."
);
")) echo json_encode([($_GET['acierto']*1)]);
exit();
}
?>
<html>
<head>
<script>
async function enviar(){
let url = 'http://localhost/stackoverflow/diegomedina/index.php?acierto='
+ document.getElementById('acierto').value;
let r = await (await fetch(url,{mode:"no-cors"})).json();
switch(r[0]){
case 3: txt=' Nos alegra que te haya gustado'; break;
case 2: txt=' Vaya, ¿lo intentamos de nuevo?'; break;
case 1: txt=' Sentimos que no sea de tu agrado, tomamos nota'; break;
}
document.getElementById('feedback').innerHTML=txt;
}
</script>
</head>
<body>
<div><h4>¿Consideras este resultado acertado?</h4></div>
<div class="pregunta-calificanos">
<select class="down-list-calificanos" name="calificanos" id="acierto">
<option value="3">Sí</option>
<option value="2">No estoy seguro</option>
<option value="1">No</option>
</select>
<span id="feedback"></span>
</div>
<input class="boton-2" type="submit" onclick="enviar()"/>
</body>
</html>
En primer lugar, para evitar la recarga de la página, he eliminado la etiqueta form
. Así todo se quedará en JS, concretamente en la función enviar()
que se pondrá en marcha al pulsar sobre el botón de Enviar. Ésta simplemente invoca al backend en PHP que está alojado en el mismo fichero, y es el que se encarga de realizar el INSERT
. Después devuelve el control al JS, confirmado que el dato ha sido correctamente registrado.
El sleep(2)
es un retardo que he introducido artificialmente para ilustrar la interacción asíncrona. En esta web han hecho un excelente trabajo explicándolo.
Te paso una captura del dataset a modo de comprobación de la correcta inserción de las calificaciones:

Espero que te resulte útil. Aunque hayamos pasado por JS, finalmente hemos terminado con la variable en PHP, y el la base de datos, sin recargar la página.