| Ivanzinho |
23-01-2009 01:30:58 |
Error envío formulario mediante AJAX
Hola compañeros, estoy realizando pruebas de programación web utilizando el método AJAX. Lo que estoy intentado es dar de alta un cliente para lo cual tengo lo siguiente :
El formulario de entrada de datos :
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Entrada datos con Marcos Ocultos</title>
<script language='JavaScript' src='lib/clientes.js'></script>
</head>
<body>
<form action="GardarCliente.php" method="post" accept-charset="utf-8"
onsubmit="EnviarPeticion();return false">
<p>Introduza os datos do novo cliente</p>
<p>Nome do cliente : <input type="text" name="txtNome" value=""/><br/>
Dirección : <input type="text" name="txtDireccion" value=""/><br/>
Cidade : <input type="text" name="txtCidade" value=""/><br/>
Provincia : <input type="text" name="txtProvincia" value=""/><br/>
Código Postal : <input type="text" name="txtCP" value=""/><br/>
Teléfono : <input type="text" name="txtTfn" value=""/><br/>
E-mail : <input type="text" name="txtCorreo" value=""/><br/></p>
<p><input type="submit" value="Gardar Información Cliente"/></p>
</form>
<div id="divEstado"></div>
</body>
</html>
La funciones javascript :
Código:
//Muestra el argumento pasado en la capa divEstado del formulario de entrada de datos
function GardarResultado(sMensaxe){
var divEstado = document.getElementById("divEstado");
divEstado.innerHTML = "Petición completada : " + sMensaxe;
}
//Crea el objeto XMLHttp
function crearXMLHttp(){
if (typeof XMLHttpRequest != undefined) {
return new XMLHttpRequest();
}
else if (window.ActiveXObject) {
var aVersiones = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp.2.0", "MSXML2.XMLHttp"];
for (var i = 0; i < aVersiones.length; i++) {
try {
var oXmlHttp = new ActiveXObject(aVersiones[i]);
return oXmlHttp;
}
catch (oErro) {
//Non facer nada
}
}
}
throw new Error("O obxeto XMLHttp non se puido crear");
}
//Obtiene el cuerpo de la petición que se pasará mediante el metodo Post
function ObterCorpoPeticion(oFormulario){
var aParametros = new Array();
for (var i = 0; oFormulario.elements.length; i++){
var sParametros = encodeURIComponent(oFormulario.elements[i].name);
sParametros += "=";
sParametros += encodeURIComponent(oFormulario.elements[i].value);
aParametros.push(sParametros);
}
aParametros.join("&");
}
//Envía la petición al servidor
function EnviarPeticion(){
var oFormulario = document.forms[0];
var sCorpo = ObterCorpoPeticion(oFormulario);
var XmlHttp = crearXMLHttp();
XmlHttp.open("post", "GardarCliente.php", true);
XmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
XmlHttp.onreadystatechange = function(){
if (XmlHttp.readyState == 4){
if (XmlHttp.status == 200){
GardarResultado(XmlHttp.responseText);
} else {
GardarResultado("Ocorreu un erro : " + XmlHttp.statusText);
}
}
}
XmlHttp.send(sCorpo);
}
y por último la pagina PHP que realiza la inserción del los datos en la base de datos y devuelve el mensaje al navegador :
Código PHP:
<?php
header("Content-Type: text/plain");
$sNome = $_POST["txtNome"];
$sDir = $_POST["txtDireccion"];
$sCidade = $_POST["txtCidade"];
$sProv = $_POST["txtProvincia"];
$sCP = $_POST["txtCP"];
$sTfn = $_POST["txtTfn"];
$sCorreo = $_POST["txtCorreo"];
$sEstado = '';
mysql_connect("localhost","ivan","bolsillo");
mysql_select_db("Proba_Ajax");
$sConsulta = "Insert into clientes(Nome, Direccion, Cidade, Provincia, C.P., Tfn, Email)".
"values('$sNome','$sDir','$sCidade','$sProv','$sCP','$sTfn','$sCorreo')";
if($result = mysql_query($sConsulta)){
$sEstado = 'Cliente engadido correctamente con Id : '.mysql_insert_id();
}else{
$sEstado = 'Ocorreu un erro durante a inserción do cliente, os datos non foros gardados ';
}
echo $sEstado;
?>
El problema con el que me encuetro es que no se para el envío de datos al hacer el return false en el evento onsubmit siempre se abre la página GardarCliente.php.
La función EnviarPeticion se ejecuta, pero en la línea que se llama a la función ObterCorpoPeticion se abre la página GardarCliente.php justo al finalizar el bucle for de la función ObterCorpoPeticion, sin llegar a ejecutarse la línea aParametros.join("&");. So comento esta línea la página se abre justo despues de la línea XmlHttp.send(sCorpo); en la función EnviarPeticion, es decir, nunca llega a ejecutarse el evento onreadystatechange.
Espero no haber sido muy pesado con la explicación.
Un saúdo y gracias por vuestra paciencia y dedicación. |
