Gracias.
Vi un tutorial de los de la pagina thenewboston, ellos lo hacen con jquery, pero con ese vídeo entendí mejor.
Lo que pasa es que el responseText siempre trae todo el codigo html. Así que creo que es mejor enviar a otra pagina la petición, procesar en esa página y solo mandar devuelta la respuesta. Así es más sencillo aunque se crearían más páginas.
Otra cosa que estaba haciendo mal es que pensaba que tenía que utilizar los name que le había puesto en el html, pero son los name que mando en el query_string.
Dejo el codigo:
formulario.php
Código Javascript
:
Ver original<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>
<html>
<head>
<title>Formulario</title>
<script type="text/javascript">
var peticion_http = null;
var READY_STATE_COMPLETE = 4;
function iniciar_xhr(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
}
window.onload = function(){
peticion_http = iniciar_xhr();
btnEnviar = document.getElementsByTagName("button")[0];
btnEnviar.onclick = enviarPeticion;
}
function enviarPeticion(){
nombre = document.getElementsByName("txtNombre")[0].value;
apellido = document.getElementsByName("txtApellido")[0].value;
query_string = "nombre=" + encodeURIComponent(nombre) +
"&apellido=" + encodeURIComponent(apellido) +
"&nocache=" +Math.random();
peticion_http.onreadystatechange = verDatosRecibidos;
peticion_http.open("POST","http://localhost/AJAX/servidor.php", true);
peticion_http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
peticion_http.send(query_string);
}
function verDatosRecibidos(){
if(peticion_http.readyState == READY_STATE_COMPLETE){
if(peticion_http.status == 200) {
div = document.getElementById("datosEnviados");
respuesta = peticion_http.responseText.split(",");
div.innerHTML = "Nombre: " +respuesta[0] +
"<br/>Apellido: " +respuesta[1];
alert(peticion_http.responseText);
}
}
}
</script>
</head>
<body>
<h1> Formulario de prueba </h1>
<table>
<tr>
<td> Nombre </td>
<td> <input type="text" name="txtNombre" />
</tr>
<tr>
<td> Apellido </td>
<td> <input type="text" name="txtApellido" />
</tr>
<tr>
<td colspan="2">
<button type="button"> Enviar </button>
</td>
</tr>
</table>
<div id="datosEnviados"></div>
</body>
</html>
servidor.php
Código PHP:
Ver original<?php
echo $_POST['nombre'];
echo ",";
echo $_POST['apellido'];
?>