Scribd Logo
Upload

Welcome to Scribd!

  • Enviar Formulario Con Ajax JQuery JQuery Manual

    Uploaded by

    bash nitter
    138 views9 pages
    Enviar formulario con ajax jQuery jQuery Manual.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Enviar formulario con ajax jQuery jQuery Manual.pdf

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    138 views9 pages

    Enviar Formulario Con Ajax JQuery JQuery Manual

    Uploaded by

    bash nitter
    Enviar formulario con ajax jQuery jQuery Manual.pdf

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 9

    jQuery Manual (http://jquerymanual.blogspot.

    com/)
    "jQuery est considerado como uno de los ms importantes Frameworks
    de Javascript, escribe menos cdigo y obtn ms rendimiento."

    Buscar

    (htt (htt (htt (htt (htt

    Enviar formulario con ajax jQuery

    Tutorial - Enviar formulario con Ajax jquery y PHP

    En el siguiente ejemplo, os mostrar como enviar un formulario va AJAX, este proceso facilitar las
    consultas necesarias a PHP, todo ello sin tener que refrescar la pgina cada vez que hay que hacer una
    consulta, por ejemplo, a una base de datos.
    Para el ejemplo vamos a usar dos archivos, uno ser un "index.php" que ser la pgina principal y el
    que albergar el form para realizar las consultas, al otro lo he llamado "dame-datos.php", este archivo
    recibir las variables del formulario, las analizar y devolver un resultado u otro segn su valor, todo
    ello como dije anteriormente sin necesidad de refrescar la pgina, es la gran ventaja de AJAX.

    El archivo index.php contiene un formulario con un campo de texto en el cual se solicita que ingreses
    un nombre, y un botn para enviar el formulario a travs del mtodo POST, a dems de un div dnde
    se mostrar el resultado de la consulta AJAX.
    El archivo dame-datos.php recibe el valor del campo nombre y posteriormente analizar si el nombre
    se encuentra dentro de un array con tres nombres, si se encuentra devuelve una respuesta positiva y
    negativa si no es encontrado.
    El cdigo del archivo index.php es el siguiente ...

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Enviar formulario con Ajax Jquery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min
    .js"></script>
    <script>
    $(function(){
    $("#btn_enviar").click(function(){
    var url = "dame-datos.php"; // El script a dnde se realizar la peticin.
    $.ajax({
    type: "POST",
    url: url,
    data: $("#formulario").serialize(), // Adjuntar los campos del fo
    rmulario enviado.
    success: function(data)
    {
    $("#respuesta").html(data); // Mostrar la respuestas del scri
    pt PHP.
    }
    });
    return false; // Evitar ejecutar el submit del formulario.
    });
    });
    </script>
    </head>
    <body>
    <p>Al enviar el formulario va ajax, consultaremos en el archivo dame-datos.
    php si el valor del campo nombre se
    encuentra en el array y la respuestas ser positiva o negativa, segn su val
    or.</p>
    <p>El Array contiene los siguientes nombres ... <b>antonio, pedro, alberto</

    b></p>
    <center>
    <form method="post" id="formulario">
    <table>
    <tr>
    <td>Introduce un nombre:</td><td><input type="text" name="nombre"></td>
    <td></td><td><input type="button" id="btn_enviar" value="Buscar nombre"></td
    >
    </tr>
    </table>
    </form>
    <div id="respuesta">
    </div>
    </center>
    </body>
    </html>

    El cdigo del archivo dame-datos.php es el siguiente ...

    <?php
    $resultado = "";
    /* Filtrar los datos */
    $nombre = addslashes(htmlspecialchars($_POST["nombre"]));
    /* Crear un Array. Simulando una consulta a una base de datos */
    $array = array("antonio", "pedro", "alberto");
    /*Buscar en el array */
    for ($x=0; $x<count($array); $x++)
    {
    if ($nombre == $array[$x])
    {
    $resultado = "<p>El nombre ".$array[$x]." <b>SI</b> se encuentra en la base
    de datos</p>";
    }
    }
    if($resultado == "")
    {
    echo "<p>El nombre ".$nombre." <b>NO</b> se encuentra en la base de datos</p
    >";
    }
    else
    {
    echo $resultado;
    }
    ?>

    (http://3.bp.blogspot.com/tsImdEXBI_8/Ubc7dlf0ALI/AAAAAAAAEPw/Tmm7uyymBYg/s1600/1.JPG)
    Ajax Form

    (http://4.bp.blogspot.com/GTGLxMnsp04/Ubc7yChhrTI/AAAAAAAAEP4/1pvZWguHEe8/s1600/2.JPG)
    Ajax Form

    Keywords: ajax, submit form, enviar formulario, ajax, jquery, la funcin ajax, cdigo
    ajax, respuesta ajax, consulta ajax, ejemplo ajax form, jquery ejemplo.

    +2 Recomendar esto en Google

    (htt (htt (htt (htt (htt


    Etiquetas: ajax (http://jquery-manual.blogspot.com/search/label/ajax), Jquery (http://jquerymanual.blogspot.com/search/label/Jquery)

    11 comentarios:
    Dante Ezequiel Ortiz Lopez (https://www.blogger.com/profile/02792157110244714929)
    dijo...
    CAMARA LA NETA QUE BUEN PARO ME HIZO ESTE CODIGO LLEVABA 3 DIAS
    INTENTANDO CON DIFERENETE METODOS AJAX JQUERY Y NADA HASTA QUE PROBE
    CON EL TUYO Y DIOS DIJO HAGASE LA LUZ Y ESTE PROGRAMA ME AYUDO
    7 de diciembre de 2013, 4:55 (http://jquery-manual.blogspot.com/2013/06/enviar-formulariocon-ajax-jquery.html?showComment=1386388538947#c3598640114605534893)
    Annimo dijo...
    Muy bueno el ejemplo y claro, especial para principiantes como yo.
    5 de febrero de 2014, 14:39 (http://jquery-manual.blogspot.com/2013/06/enviar-formulariocon-ajax-jquery.html?showComment=1391607589915#c8326613413603740200)
    Annimo dijo...
    Excelente. Y yo buscando en sitios gringos pensando que alguno de ellos dara un mejor
    ejemplo. Este es claro como el agua.
    Felicitaciones y gracias!
    21 de febrero de 2014, 16:22 (http://jquery-manual.blogspot.com/2013/06/enviar-formulariocon-ajax-jquery.html?showComment=1392996149242#c225699595578910127)
    Oscar David Galviz (https://www.blogger.com/profile/04699604186933432755) dijo...
    Excelente dato, una pregunta pero si lo que voy a subir es un archivo, ya que en el form lleva el
    Tutoriales de jQuery Manual
    atributo enctype="multipart/form-data"

    Gracias espero atento la respuesta..


    6 de marzo de 2014, 20:29 (http://jquery-manual.blogspot.com/2013/06/enviar-formulariocon-ajax-jquery.html?showComment=1394134180874#c5956283479845224053)
    Manu (https://www.blogger.com/profile/06134145102852873859) dijo...
    Pues bsicamente lo mismo, captura la variable $_FILES y analiza las propiedades del archivo a
    subir, ya sabes, tamao de archivo, tipo de archivo, etc, ... si pasa el filtro pues guardas el archivo
    en el servidor, saludos.
    6 de marzo de 2014, 21:16 (http://jquery-manual.blogspot.com/2013/06/enviar-formulariocon-ajax-jquery.html?showComment=1394136994389#c6230839276567519216)
    Andres Martin Cantos Rivadeneira
    (https://www.blogger.com/profile/05564813031623742345) dijo...
    El asunto cuando se intenta enviar fotos es un poco ms complejo, tambin lo estoy
    investigando cuando tenga la respuesta la publico en mi blog.
    http://enseniameelcodigo.blogspot.com/
    9 de abril de 2014, 1:07 (http://jquery-manual.blogspot.com/2013/06/enviar-formulario-conajax-jquery.html?showComment=1396998466778#c2327096078526409514)
    Annimo dijo...
    Lo que no entiendo, es esta parte:
    " $("#respuesta").html(data);"
    de donde sale el (data) ?????
    22 de abril de 2014, 22:24 (http://jquery-manual.blogspot.com/2013/06/enviar-formulariocon-ajax-jquery.html?showComment=1398198262387#c820984435135373866)
    Annimo dijo...
    Me ha sido de mucha ayuda. Mil gracias por tu trabajo!
    9 de junio de 2014, 1:47 (http://jquery-manual.blogspot.com/2013/06/enviar-formulario-conajax-jquery.html?showComment=1402271272388#c8364330441302956854)
    Jos (https://www.blogger.com/profile/09820039717963866204) dijo...
    Muchas gracias, me sirvi de MUCHSIMO. Sencillo y conciso.
    2 de septiembre de 2015, 9:23 (http://jquery-manual.blogspot.com/2013/06/enviarformulario-con-ajax-jquery.html?
    showComment=1441178601680#c7343918504178485447)
    Guido (http://www.guidobatanmaquinarias.com) dijo...
    Muy bueno realmente impecable yo tambien varios dias buscando algo bueno que valide php te
    felicito por el post saludos desde Argentina!!!
    9 de diciembre de 2015, 4:14 (http://jquery-manual.blogspot.com/2013/06/enviar-formulariocon-ajax-jquery.html?showComment=1449630855158#c7389024837578192884)
    Annimo dijo...

    Lunes 25 de Julio de 2016 ... y tu trabajo sigue ayudando


    Muchsimas gracias
    25 de julio de 2016, 7:24 (http://jquery-manual.blogspot.com/2013/06/enviar-formulario-conajax-jquery.html?showComment=1469424246438#c76598110722253673)
    Publicar un comentario en la entrada (https://www.blogger.com/comment.g?
    blogID=1805246100277841107&postID=5672345453322455408&isPopup=true)

    Enlaces a esta entrada


    Crear un enlace (https://www.blogger.com/blog-this.g)
    Entrada ms reciente (http://jquery-manual.blogspot.com/2013/06/limitar-numero-de-caracterescon-jquery.html)
    Entrada antigua (http://jquery-manual.blogspot.com/2013/06/generar-diccionario-de-claveswep_8.html)
    Pgina principal (http://jquery-manual.blogspot.com/)
    Suscribirse a: Enviar comentarios (Atom) (http://jquerymanual.blogspot.com/feeds/5672345453322455408/comments/default)

    Entradas populares
    (http://jquery-manual.blogspot.com/2013/06/enviar-formulario-con-ajaxjquery.html)

    Enviar formulario con ajax jQuery (http://jquery-manual.blogspot.com/2013/06/enviarformulario-con-ajax-jquery.html)


    En el siguiente ejemplo, os mostrar como enviar un formulario va AJAX , este proceso
    facilitar las consultas necesarias a PHP ,...
    Como dar estilos css a una caja de texto - input text y textarea (http://jquerymanual.blogspot.com/2013/11/como-dar-estilos-css-una-caja-de-texto.html)
    Bienvenid@s, hoy os mostrar las propiedades CSS fundamentales para que podis darle
    vuestros estilos personalizados a los elementos i...
    Expresiones Regulares con jQuery match() (http://jquerymanual.blogspot.com/2012/05/expresiones-regulares-con-jquery-match.html)
    Expresiones Regulares con Jquery match() En esta ocasin vamos a ver una forma sencilla de
    comprobar los valores que son enviados a t...
    datepicker en formato espaol y restriccin de fechas jQuery UI (http://jquerymanual.blogspot.com/2013/02/datepicker-en-formato-espanol-y.html)
    datepicker es una de las utilidades ms solicitadas de jquery UI , ya que permite personalizar
    calendarios a la medida, de lo contr...
    Como crear funciones con jQuery (http://jquery-manual.blogspot.com/2013/02/como-crearfunciones-con-jquery.html)
    En estos dos vdeos podris seguir desde cero el proceso de construccin de plugins para
    jQuery. Como crear funciones con jQuery p...

    (http://jquery-manual.blogspot.com/2015/03/tutorial-de-yii2-en-espanol.html)
    Tutorial de Yii2 en espaol (http://jquery-manual.blogspot.com/2015/03/tutorial-de-yii2-enespanol.html)
    A continuacin podis seguir un tutorial de Yii2 en espaol , en l se describen los conceptos
    bsicos para poder crear aplicaciones web ...
    Obtener claves WLAN_XXXX y JAZTTEL_XXXX por defecto, auditora Wireless (http://jquerymanual.blogspot.com/2013/06/obtener-claves-wlanxxxx-y-jazttelxxxx.html)
    La siguiente auditora consiste en un algoritmo que extrae las claves WIFI que vienen por
    defecto en algunos routers de telefnica y J...

    (http://jquery-manual.blogspot.com/2014/05/como-subir-una-imagen-con-

    You might also like