Perdida de datos enviando una forma en Ajax.

llanesluna · #1 (**permalink**) 05/07/2007, 07:21

Hola, tengo el siguiente objeto q copie de algún lugar(no recuerdo donde).

Código:

function creaAjax(){
  var objetoAjax=false;
  try {
   /*Para navegadores distintos a internet explorer*/
   objetoAjax = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
   try {
     /*Para explorer*/
     objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");
     } 
     catch (E) {
     objetoAjax = false;
   }
  }

  if (!objetoAjax && typeof XMLHttpRequest!='undefined') {
   objetoAjax = new XMLHttpRequest();
  }
  return objetoAjax;
}

 function FAjax (url,capa,valores,metodo)
{
   var ajax=creaAjax();
   var capaContenedora = document.getElementById(capa);

/*Creamos y ejecutamos la instancia si el metodo elegido es POST*/
 if(metodo.toUpperCase()=='POST'){
        document.write="hola pepe";
    ajax.open ('POST', url, true);
    ajax.onreadystatechange = function() {
         if (ajax.readyState==1) {
                 capaContenedora.innerHTML="Cargando.......";
         }
         else if (ajax.readyState==4){
			 document.getElementById(capa).innerHTML=ajax.responseText; 
          /*  if(ajax.status==200)
            {
                 document.getElementById(capa).innerHTML=ajax.responseText; 
            }
            else if(ajax.status==404)
                 {

                     capaContenedora.innerHTML = "La direccion existe";
                 }*/
            /* else
                 {
                     capaContenedora.innerHTML = "Error: "+ajax.status;
                 }*/
        }
    }
    ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    ajax.send(valores);
    return;
}
}

Aquí la pag inicial de entrada de datos.

Código:

<html>
   <head>
      <title>Ajax: Ejemplo - Env&iacute;o de datos por m&eacute;todo POST</title>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="libreriaAjax.js"></script>
        <style type="text/css">
              #capaContenedora{
                border-style: groove double;
                padding: 10px;
                margin: 14px;
                border-color: blue;
                }
        </style>
    </head>
<body>
Este ejemplo enviar&aacute; datos por m&eacute;todo post y los pondr&aacute; la capa de abajo:<br><br>
    <div style="text-align: center;"> <form method="post" onsubmit="FAjax('ajax.asp','capaContenedora','campo1='+document.getElementById('campo1').value+'&amp;campo2='+document.getElementById('campo2').value,'POST'); return false" action="#">
        <div style="paddi">Campo1:<input type="text" id="campo1" value="valor1" /></div>
        <div style="text-align=top;">Campo2:<input id="campo2" value="valor2"></div>
        <div><input type="submit" value="enviar"></div>
    </form></div>
    <div id="capaContenedora">Capa que recibir&aacute; los datos</div>
    <div style="text-align: center;"></div>
</body>
</html>

Y aqui la pag q recibe y procesa los datos.

Código:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
Campo 1 = <%= request("campo1") %><br>
Campo 2 = <%= request("campo2") %>

El problema es el siguiente. Todos los scripts funcionan bien, pero al hacer el envio y publicarlo en la capaContenedora pierdo caracteres como % * y otros como espacios. Porque puedes suceder esto?
El código funciona bien en la pag de donde lo saqué, la diferencia es q la pag q recibe los datos es una en php.
Alguien puede explicarme porqué?

Gracias de antemano.

caricatos · #2 (**permalink**) 06/07/2007, 01:05

Hola:

Otro problema que no es ajax sino javascript... cuando se envían datos con un formulario normal, el navegador (o el sistema) hace una conversión de los caracteres especiales que se envían, pero al no enviarlos con un formulario normal, esa conversión deberías hacerla manualmente con la función escape en el envío y unescape en la recepción:

Código:

onsubmit="FAjax('ajax.asp','capaContenedora','campo1='+escape(document.getElementById('campo1').value)+'&amp;campo2='+escape(document.getElementById('campo2').value),'POST');

Saludos