0

Hola buen día estoy practicando ajax pero estoy teniendo un problema y no se cual es ayudenme porfavor.

El cuerpo de la página llamada index.html es la sgte:

<!DOCTYPE html>
<html>
<head>
  <title>Ajax</title>
</head>
<body>
        <input type="text" id="nombre">
        <input type="text" id="apellido">
        <input type="submit" value="Validar" onclick="ajax();">
        <div id="info"></div>

<script type="text/javascript">

    function ajax(){

            var resultado = document.getElementById("info");
            var xmlhttp;

            if(windows.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            var a = document.getElementById("nombre").value;
            var b = document.getElementById("apellido").value;
            var infoDato = "nombre="+a+"&apellido="+b;

            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
                        var mensaje = xmlhttp.responseText;
                        resultado.innerHTML = mensaje;
                }
            }

            xmlhttp.open("POST","servidor.php",true);
            xmlhttp.setRequestHeader("Content-type","applicaction/x-www- 
            form-urlencoded");
            xmlhttp.send(infoDato);
           }
       </script>
  </body>
  </html>

El cual manda los datos a servidor.php

<?php

   $nombre = $_POST['nombre'];
   $apellido = $_POST['apellido'];

  if(empty($nombre) || empty($apellido)){
    echo "Ingrese nombre y apellido";
  }else{
    echo "Hola ".$nombre." ".$apellido;
 }

 ?>

Lo que quiero hacer es solamente la validación de las cajas de texto que se ingrese un nombre y apellido. Pero no aparece mensaje en el div

10
  • ¿En responsseText no sobra una s?
    – JDev
    el 9 may. 2019 a las 6:48
  • Ya lo arregle pero igual no me aparece el mensaje el 9 may. 2019 a las 6:51
  • Me parece que resultado no esta disponible dentro de la función onreadystatechange. Prueba a hacer el document.getElementById("info") dentro de la funcion.
    – JDev
    el 9 may. 2019 a las 6:53
  • Eso también lo había intentado pero sigue sin aparecer el mensaje. Me pregunto si xampp tendrá algo que ver? el 9 may. 2019 a las 6:59
  • No debería afectarle. Haz la llamada a servidor.php desde el navegador a ver si te da el mensaje "Ingrese nombre y apellido";
    – JDev
    el 9 may. 2019 a las 7:03

1 respuesta 1

-2

Cambia tu código por este:

    <!DOCTYPE html>
<html>
<head>
  <title>Ajax</title>
</head>
<body>
        <input type="text" id="nombre" name="nombre">
        <input type="text" id="apellido" name="apellido">
        <input type="button" value="Validar" onclick="ajaxS();">
        <div id="info"></div>

<script>
    function ajaxS(){
            var a = document.getElementById("nombre").value;
            var b = document.getElementById("apellido").value;

            var http = new XMLHttpRequest();
            var url = 'servidor.php';
            var params = "nombre="+a+"&apellido="+b;
            http.open('POST', url, true);

            //Send the proper header information along with the request
            http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

            http.onreadystatechange = function() {//Call a function when the state changes.
                if(http.readyState == 4 && http.status == 200) {
                        var mensaje = http.responseText;
                        document.getElementById("info").innerHTML = mensaje;
                }
            }
            http.send(params);          
             }
 </script>
  </body>
  </html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.