Estoy tratando de enviar un formulario HTML con AJAX usando este ejemplo.

Mi código HTML:

<form id="formoid" action="studentFormInsert.php" title="" method="post">
    <div>
        <label class="title">First Name</label>
        <input type="text" id="name" name="name" >
    </div>
    <div>
        <label class="title">Name</label>
        <input type="text" id="name2" name="name2" >
    </div>
    <div>
        <input type="submit" id="submitButton"  name="submitButton" value="Submit">
    </div>
</form>

Mi script:

<script type="text/javascript">
    $(document).ready(function() { 
        $('#formoid').ajaxForm(function() { 
            alert("Thank you for your comment!"); 
        }); 
    });
</script>

Esto no está funcionando, ni siquiera estoy recibiendo el mensaje de alerta
y cuando me someto no quiero redirigir a otra página, solo quiero mostrar el mensaje de alerta.

Hay una manera sencilla de hacerlo?

PS: tengo varios campos, sólo he puesto dos como ejemplo.

  • u puede no acabar con la «forma» componente de html? y el uso de jquery para publicar en el botón haga clic en controlador de
InformationsquelleAutor Oliveira | 2013-05-01

3 Comentarios

  1. 164

    Rápida Descripción de AJAX

    AJAX es simplemente Asincrónica Javascript o XML (en la mayoría de las nuevas situaciones JSON). Porque estamos haciendo una tarea ASÍNCRONA que probablemente será brindar a nuestros usuarios una más agradable experiencia de interfaz de usuario. En este caso específico que estamos haciendo el envío de un FORMULARIO mediante AJAX.

    Muy rápidamente hay 4 en general de acciones web GET, POST, PUT, y DELETE; estos corresponden directamente con SELECT/Retreiving DATA, INSERTING DATA, UPDATING/UPSERTING DATA, y DELETING DATA. Un defecto HTML/ASP.Net webform/PHP/Python o cualquier otro form acción es la de «enviar», que es POSTERIOR a la acción. Debido a esta por debajo de todos describir hacer un POST. Sin embargo, algunas veces con http que usted podría querer una acción diferente y es probable que desee utilitize .ajax.

    Mi código específicamente para usted (que se describe en el código de los comentarios):

    <!DOCTYPE html>
    <html>
    <head>
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
        <form id="formoid" action="studentFormInsert.php" title="" method="post">
            <div>
                <label class="title">First Name</label>
                <input type="text" id="name" name="name" >
            </div>
            <div>
                <label class="title">Name</label>
                <input type="text" id="name2" name="name2" >
            </div>
            <div>
                <input type="submit" id="submitButton"  name="submitButton" value="Submit">
            </div>
     </form>
    <script type='text/javascript'>
        /* attach a submit handler to the form */
        $("#formoid").submit(function(event) {
    
          /* stop form from submitting normally */
          event.preventDefault();
    
          /* get the action attribute from the <form action=""> element */
          var $form = $( this ),
              url = $form.attr( 'action' );
    
          /* Send the data using post with element id name and name2*/
          var posting = $.post( url, { name: $('#name').val(), name2: $('#name2').val() } );
    
          /* Alerts the results */
          posting.done(function( data ) {
            alert('success');
          });
        });
    </script>
    
    </body>
    </html> 

    Documentación

    De jQuery sitio web $.post documentación.

    Ejemplo: formulario de Envío de datos mediante peticiones ajax

    $.post("test.php", $("#testform").serialize());

    Ejemplo: Post de un formulario mediante ajax y poner los resultados en un div

    <!DOCTYPE html>
    <html>
        <head>
            <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        </head>
        <body>
            <form action="/" id="searchForm">
                <input type="text" name="s" placeholder="Search..." />
                <input type="submit" value="Search" />
            </form>
            <!-- the result of the search will be rendered inside this div -->
            <div id="result"></div>
            <script>
                /* attach a submit handler to the form */
                $("#searchForm").submit(function(event) {
    
                    /* stop form from submitting normally */
                    event.preventDefault();
    
                    /* get some values from elements on the page: */
                    var $form = $(this),
                        term = $form.find('input[name="s"]').val(),
                        url = $form.attr('action');
    
                    /* Send the data using post */
                    var posting = $.post(url, {
                        s: term
                    });
    
                    /* Put the results in a div */
                    posting.done(function(data) {
                        var content = $(data).find('#content');
                        $("#result").empty().append(content);
                    });
                });
            </script>
        </body>
    </html>

    Nota Importante

    Sin usar OAuth o, como mínimo, HTTPS (SSL/TLS), por favor no utilice este método para asegurar los datos (números de tarjeta de crédito, número de seguro social, algo que es PCI, HIPAA, o el inicio de sesión relacionadas)

    • jsfiddle.net/Ujryx el código es la presentación de
    • ¿cómo puedo establecer solicitud de Autorización de encabezado en esto ? Traté de beforeSend: function (xhr) { xhr.setRequestHeader("Authorization", "*****"); xhr.setRequestHeader("contentType", "application/json;charset=UTF-8"); }, Pero esto no establece ningún tipo de cabecera
    • usted necesidad de utilizar $.ajax que puedo escribir un ejemplo de si a usted le gusta, pero que es realmente una cuestión separada
    • tengo hilo iniciado por eso. permítanme compartir con ustedes.
    • por favor, consulte esta stackoverflow.com/questions/32943042/…
    • ¿Qué pasa si la solicitud POST a la url es una dirección url diferente? Noto que uso studentFormInsert.php en acción.. Así que si quiero usar localhost:3000, supongo que deberíamos usar localhost:3000 en la acción, pero no funciona.. ayuda Pls!
    • usted necesita a punto a su servicio extremo (la página que tiene el método que usted está llamando). Normalmente localhost:3000 no sería el punto final es el dominio…necesitaría localhost:3000/myEndpoint así: <form id="formoid" action="endpoint.php" title="" method="post"> Usted también no necesita localhost:3000 a menos que no es el dominio que el javascript se sirve en. Ya que esto parece más apropiado para un chat…chat es chat.stackoverflow.com/rooms/138238/wendymunmunwang
    • podemos evitar el uso de formar un post y simplemente hacer jquery post sobre un botón (que es un botón de html no parte de cualquier formulario div) haga clic en controlador. De esta manera el evento.preventdefault no será necesario ya?
    • por supuesto, pero luego su consulta de selección para las variables que se extraen desde el elemento html es diferente

  2. 26
    var postData = "text";
          $.ajax({
                type: "post",
                url: "url",
                data: postData,
                contentType: "application/x-www-form-urlencoded",
                success: function(responseData, textStatus, jqXHR) {
                    alert("data saved")
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(errorThrown);
                }
            })
    • el éxito completo de la función que va a suceder cuando se complete la llamada y recibe un 200 OK desde el servidor
    • hola pongo: $(document).ready(function () { $(‘#formoid’).submit(function () { var postData = «texto»; $.ajax({ type: «post», url: «url», de datos: postData, contentType: «studentFormInsert.php», success: function(responseData, textStatus, jqXHR) { alert(«datos guardados») }, error: function(jqXHR, textStatus, errorThrown) { console.log(errorThrown); } }) }); no su trabajo en realidad.. cualquier modificación en php es necesaria?
    • buen ejemplo y bien escrito, por favor enviar respuesta con ella, aunque no sólo de código de ejemplo con ninguna explicación.
    • No entiendo cómo conectar con la forma que me quieras
    • ¿Por qué no hay explicación?
    • Este uso del éxito no es obsoleto stackoverflow.com/questions/15821141/…

  3. 3

    Si agrega:

    jquery.form.min.js

    Usted puede simplemente hacer esto:

    <script>
    $('#myform').ajaxForm(function(response) {
      alert(response);
    });
    
    //this will register the AJAX for <form id="myform" action="some_url">
    //and when you submit the form using <button type="submit"> or $('myform').submit(), then it will send your request and alert response
    </script>

    NOTA:

    Usted podría utilizar simple $(‘FORM’).serialize() como se sugiere en el post anterior, pero que no va a funcionar para ENTRADAS del ARCHIVO… ajaxForm() voluntad.

Dejar respuesta

Please enter your comment!
Please enter your name here