Tenía una tarea de PHP que decidí que quería probar y agregar AJAX porque en nuestra clase no aprenderemos AJAX solo PHP. Parece que no puedo hacer que la respuesta funcione. Sin embargo, en la sección de red de mi consola en Fire Fox, puedo encontrar el envío POST con los valores que ingresé en el formulario y el eco de PHP como resultado del funcionamiento de la función php. Pero no aparecerá en mi etiqueta div. Cualquier ayuda sería bienvenida, gracias.
Aquí está el HTML y JavaScript:
<html lang="en"> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function testPass() { var username = document.getElementById("uname").value; var passwrd = document.getElementById("passwd").value; var creds = "uname="+username+"&passwd="+passwrd; var ajx = new XMLHttpRequest(); ajx.onreadystatechagne = function () { if (ajx.readyState == 4 && ajx.status == 200) { document.getElementById("message").innerHTML = ajx.responseText; } }; ajx.open("POST", "authenticate.php", true); ajx.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); ajx.send(creds); //document.getElementById("message").innerHTML = creds; } </script> </head> <body> <p> <form id="login"> <strong>Login</strong><br/><br/> Username :<br/><input type="text" id="uname"><br/> Password :<br/><input type="text" id="passwd"><br/><br/> <div id="message" style="color:red;"></div> <br/><button type="button" value="Submit" onclick="testPass();">Sign In</button> </form> </p> </body> </html>Y aquí está el PHP:
<?php $uname = $_POST['uname']; $passwd = $_POST['passwd']; if (empty($uname) && empty($passwd)) { echo "The username and password are required!"; } else if (empty($uname)) { echo "The username is required!"; } else if (empty($passwd)) { echo "The password is required!"; } else { echo "It works!"; } ?>Intente utilizar las funciones tanto como sea posible para que el código sea reutilizable y más fácil de solucionar. Sugiero el siguiente código.
<html lang="en"> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function createAjaxRequestObject() { var xmlhttp; if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } // Create the object return xmlhttp; } function AjaxPost(ajaxURL, parameters, onComplete) { var http3 = createAjaxRequestObject(); http3.onreadystatechange = function() { if(http3.readyState == 4) { if(http3.status == 200) { if(onComplete) { onComplete(http3.responseText); } } } }; // Create parameter string var parameterString = ""; var isFirst = true; for(var index in parameters) { if(!isFirst) { parameterString += "&"; } parameterString += encodeURIComponent(index) + "=" + encodeURIComponent(parameters[index]); isFirst = false; } // Make request http3.open("POST", ajaxURL, true); http3.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); http3.send(parameterString); } function completedAJAX(response) { alert(response); } function testPass() { var parameters = { "uname" : document.getElementById("uname").value, "passwd" : document.getElementById("passwd").value }; AjaxPost("authenticate.php", parameters, completedAJAX); } </script> </head> <body> <p> <form id="login"> <strong>Login</strong><br/><br/> Username :<br/><input type="text" name="uname" id="uname" /><br/> Password :<br/><input type="password" name="passwd" id="passwd" /><br/><br/> <div id="message" style="color:red;"></div> <br/><button type="button" value="Submit" onclick="testPass();">Sign In</button> </form> </p> </body> </html>Otro consejo es usar Firebug si está usando Firefox o las herramientas de desarrollo en Chrome (presione CTRL + SHIFT + J) al probar algunos scripts. Este error habría aparecido en la consola y lo habrías notado de inmediato.
Tiene un error tipográfico: ajx.onreadystatechagne debería ser ajx.onreadystatechange
Supongo que ya lo resolviste pero aquí está la solución ajx.onreadystatechagne
debiera ser
ajx.onreadystatechange