Tengan un buen día, integrantes del foro. Tengo un problema que involucra AJAX Y PHP, aunque considero que el error se encuentra en la parte en AJAX pues la parte de PHP que se manda a llamar con AJAX es una variable POST XD)) Tengo un formulario, y de este formulario quiero mandar todos los valores de todos sus elementos, para ello he utilizado un script que bajé de una página de tutoriales, aunque no lo he escrito, pero lo entiendo, claro está. El punto es que el formulario pretendo enviarlo mediante POST, por lo que no es tan simple como con GET. Primeramente este es la pagina donde se encuentra el formulario cuyos datos pretendo enviar a un script PHP cargado con AJAX en la misma página, exactamente en un DIV con id=”contenido”.
Formulario.html
Código:
<html>
<head>
<title>Envío de formulario con AJAX</title>
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<form name="myform" id="myform">
<label for="mi_nombre">Ingrese su nombre:</label> <br />
<input type="text" name="name" id="name" /><br />
<label for="mi_apellido">Ingrese su apellido:</label> <br />
<input type="text" name="ape" id="ape" /><br />
<input type="submit" name="button" value="Enviar" onClick="getPag(post.php)" />
</form> <br /><br />
Respuesta del servidor: <br />
<div id="contenido"></div>
</body>
</html>
Y el archivo ajax.js que mando a llamar que contiene la lógica.
Código:
var http_request = false;
function makePOSTRequest(url, parametros) {
http_request = false;
try
{
http_request = new XMLHttpRequest();
}
catch(err1)
{
try
{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (err2)
{
try
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (err3)
{
http_request = false;
}
}
}
http_request.onreadystatechange = alertContents();
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parametros.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parametros);
}
function alertContents()
{
if (http_request.readyState == 4)
{
if (http_request.status == 200)
{
result = http_request.responseText;
document.getElementById("contenido").innerHTML = result;
}
else
{
alert('Hubo algún problema con la petición.');
}
}
}
function getPag(vinc)
{
var largoForm = document.forms[0].length; var i = 1; var indice;
while (i <= largoForm)
{
indice = i - 1;
if (indice == 0)
{
/* Nada, pues si el indice es 0, no hay otra variable antes que el a la
cual adjuntarse*/
}
else
{
poststr += "&";
}
poststr += encodeURI(document.forms[0].elements[indice].name) + "=" +
encodeURI(document.forms[0].elements[indice].value);
}
var vinculo = vinc;
makePOSTRequest(vinculo,poststr);
}
El punto es que al visualizarlo en el navegador, lo que pretendo es que al presionar el único botón que tiene el formulario, mandar todos los valores de los elementos del formulario a un script llamado post.php colocado en la misma carpeta, pero al presionar el botón, en la parte de la url en el navegador, aparece de la siguiente forma:
localhost:8097/ajax/formulario.html?name=&ape=&button=Enviar
Como si fuese una solicitud GET cuando en realidad es POST, y no me carga el script PHP, y no puedo visualizar cual es el error, y de paso, si talvez me pudiesen recomendar algún buen editor de javascript en el cual pudiera visualizar la causa de error en algún script o algo por el estilo.