Formulario AJAX simple y rápido. Formulario AJAX simple y rápido.


Mostrando resultados del 1 al 4 de 4
  1. #1
    Registro
    26-marzo-2013
    Ubicación
    Argentina
    Edad
    25
    Mensajes
    4.323
    Código PHP:
    <?php
        
    if($_POST){ ?>
            <b>Campo 1:</b> <?=$_POST['campo1']?><br>
            <b>Campo 2:</b> <?=$_POST['campo2']?>
        <? exit;
        }
    ?>
    <script>
        function AJAX(u, c, d){
            var XMLReq = new XMLHttpRequest();
            XMLReq.onreadystatechange = function(){
                if(XMLReq.readyState==4) c(XMLReq.responseText);
            };
            if(d) XMLReq.open('POST', u), XMLReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            else XMLReq.open('GET', u);
            XMLReq.send(d)
        }

        function sendForm(f, c){
            inputElements = f.querySelectorAll('input,textarea,select,button');
            for(i = 0, postVar = ''; i < inputElements.length; postVar += inputElements[i].name+'='+inputElements[i].value+'&', i++);
            AJAX(f.action, c, postVar);
            return false
        }


        function byId(i){
            return document.getElementById(i)
        }

    </script>
    <form method="post" onsubmit="return sendForm(this, function(h){ byId('status').innerHTML = h })">
        <b>Campo 1:</b><input type="text" name="campo1"><br>
        <b>Campo 2:</b><textarea name="campo2" style="width:300px;height:100px"></textarea>
        <input type="submit" value="Enviar">
    </form>
    <div id="status"></div>
    Pueden definir a donde va a enviar AJAX colocandole "action" al FORM.

    No hay mucho que explicar, ya es para usuarios más "avanzados".

    Hay que ponerle al formulario
    Código HTML:
    onsubmit="return sendForm(this, CALLBACK)"
    para que lo mande por AJAX.

    (CALLBACK, es en este caso es a donde "escribirá" la respuesta recibida, en el caso del demo, en el DIV con la ID "status")



    Modificado: me faltaba un parámetro en la función ajax.
    Última edición por zcriptz; 09-abr-2019 a las 19:27

  2. #2
    Gracias por el aporte. Limpio, eficaz y fácil de entender. Saludos!
    Citar Citar  

  3. #3
    Muy bueno el script como base pero cuidado con estas cosas.

    A este tipo de peticiones hay que aplicarles seguridad, imagino que en un caso de uso real no vas a hacer algo tan simple como pintar los campos que vienen por post en la pantalla, pero de ser así ten en cuenta que cualquier persona podría construir una petición post similar en su propio formulario, luego inyectar en los valores del campo un script en js que por ejemplo, lea las cookies de sesión (para robar la sesión obviamente) y las envie mediante ajax a otro servidor.

    Luego este formulario ponerlo en una página y pasarsela a un usuario víctima de forma que el formulario se lance automáticamente al abrirla, redirigiendole a la página que muestra los valores recibidos por post en pantalla y ejecutandose el script que le roba las cookies.
    Citar Citar  

  4. #4
    Registro
    26-marzo-2013
    Ubicación
    Argentina
    Edad
    25
    Mensajes
    4.323
    Cita Iniciado por yeik1989 Ver Mensaje
    Muy bueno el script como base pero cuidado con estas cosas.

    A este tipo de peticiones hay que aplicarles seguridad, imagino que en un caso de uso real no vas a hacer algo tan simple como pintar los campos que vienen por post en la pantalla, pero de ser así ten en cuenta que cualquier persona podría construir una petición post similar en su propio formulario, luego inyectar en los valores del campo un script en js que por ejemplo, lea las cookies de sesión (para robar la sesión obviamente) y las envie mediante ajax a otro servidor.

    Luego este formulario ponerlo en una página y pasarsela a un usuario víctima de forma que el formulario se lance automáticamente al abrirla, redirigiendole a la página que muestra los valores recibidos por post en pantalla y ejecutandose el script que le roba las cookies.
    Es solo un ejemplo, está htmlentities y tokens... entre varias cosas simples que se pueden hacer para evitar eso.

    - - - Actualizado - - -

    La "seguridad" debería estar del lado del servidor, y no en esta función. Por eso creo que no va mucho al caso.
    Citar Citar  



Temas similares

  1. Formulario de registro no envía datos con ajax
    Buenas! Primero pido disculpas por no ser más específico con el título, pero no sabía como explicarlo en tan pocas palabras. En segundo lugar,...
    Respuestas: 26
    Último mensaje: 21-ago-2016

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •