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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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