Formulario de envío de jQuery AJAX

Puede usar las funciones ajaxForm / ajaxSubmit desde Complemento de formulario Ajax o la función de serialización de jQuery.

Formulario Ajax:

$("#theForm").ajaxForm({url: 'server.php', type: 'post'})

or

$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})

ajaxForm se enviará cuando se presione el botón de envío. ajaxSubmit envía inmediatamente.

Publicar por fascículos:

$.get('server.php?' + $('#theForm').serialize())

$.post('server.php', $('#theForm').serialize())

La documentación de serialización AJAX está aquí.

Esta es una referencia simple:

// this is the id of the form
$("#idForm").submit(function(e) {

    e.preventDefault(); // avoid to execute the actual submit of the form.

    var form = $(this);
    var url = form.attr('action');
    
    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    
});

Otra solución similar que usa atributos definidos en el elemento de formulario:

<form id="contactForm1" action="/es/your_url" method="post">
    <!-- Form input fields here (do not forget your name attributes). -->
</form>

<script type="text/javascript">
    var frm = $('#contactForm1');

    frm.submit(function (e) {

        e.preventDefault();

        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        });
    });
</script>

Hay algunas cosas que debe tener en cuenta.

1. Hay varias formas de enviar un formulario.

• usando el botón de enviar
• presionando enter
• activando un evento de envío en JavaScript
• posiblemente más dependiendo del dispositivo o dispositivo futuro.

Por lo tanto, debemos unirnos a la formulario enviar evento, no el evento de clic de botón. Esto garantizará que nuestro código funcione en todos los dispositivos y tecnologías de asistencia ahora y en el futuro.

2. hijax

Es posible que el usuario no tenga habilitado JavaScript. A hijax El patrón es bueno aquí, donde tomamos suavemente el control del formulario usando JavaScript, pero lo dejamos para enviar si JavaScript falla.

Debemos extraer la URL y el método del formulario, por lo que si el HTML cambia, no necesitamos actualizar el JavaScript.

3. JavaScript discreto

Usar event.preventDefault () en lugar de falso retorno es una buena práctica, ya que permite que el evento aumente. Esto permite que otros scripts se relacionen con el evento, por ejemplo, scripts de análisis que pueden estar monitoreando las interacciones del usuario.

Velocidad

Idealmente, deberíamos usar un script externo, en lugar de insertar nuestro script en línea. Podemos enlazar a esto en la sección de cabecera de la página usando una etiqueta de secuencia de comandos, o enlazarlo en la parte inferior de la página para mayor velocidad. El script debería mejorar silenciosamente la experiencia del usuario, no interferir.

Code

Suponiendo que está de acuerdo con todo lo anterior y desea capturar el evento de envío y manejarlo a través de AJAX (un patrón de hijax), podría hacer algo como esto:

$(function() {
  $('form.my_form').submit(function(event) {
    event.preventDefault(); // Prevent the form from submitting via the browser
    var form = $(this);
    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: form.serialize()
    }).done(function(data) {
      // Optionally alert the user of success here...
    }).fail(function(data) {
      // Optionally alert the user of an error here...
    });
  });
});

Puede activar manualmente el envío de un formulario cuando lo desee a través de JavaScript usando algo como:

$(function() {
  $('form.my_form').trigger('submit');
});

Edit:

Recientemente tuve que hacer esto y terminé escribiendo un complemento.

(function($) {
  $.fn.autosubmit = function() {
    this.submit(function(event) {
      event.preventDefault();
      var form = $(this);
      $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize()
      }).done(function(data) {
        // Optionally alert the user of success here...
      }).fail(function(data) {
        // Optionally alert the user of an error here...
      });
    });
    return this;
  }
})(jQuery)

Agregue un atributo de envío automático de datos a su etiqueta de formulario y luego puede hacer esto:

HTML

<form action="/es/blah" method="post" data-autosubmit>
  <!-- Form goes here -->
</form>

JS

$(function() {
  $('form[data-autosubmit]').autosubmit();
});

También puedes usar Formulario de datos (Pero no disponible en IE):

var formData = new FormData(document.getElementsByName('yourForm')[0]);// yourForm: form selector        
$.ajax({
    type: "POST",
    url: "yourURL",// where you wanna post
    data: formData,
    processData: false,
    contentType: false,
    error: function(jqXHR, textStatus, errorMessage) {
        console.log(errorMessage); // Optional
    },
    success: function(data) {console.log(data)} 
});

Así es como usas Formulario de datos.

Versión simple (no envía imágenes)

<form action="/es/my/ajax/url" class="my-form">
...
</form>
<script>
    (function($){
        $("body").on("submit", ".my-form", function(e){
            e.preventDefault();
            var form = $(e.target);
            $.post( form.attr("action"), form.serialize(), function(res){
                console.log(res);
            });
        });
    )(jQuery);
</script>

Copie y pegue la ajaxificación de un formulario o todos los formularios en una página

Es una versión modificada de Alfrekjv's https://www.youtube.com/watch?v=xB-eutXNUMXJtA&feature=youtu.be

• Funcionará con jQuery> = 1.3.2
• Puede ejecutar esto antes de que el documento esté listo
• Puede eliminar y volver a agregar el formulario y seguirá funcionando
• Se publicará en la misma ubicación que el formulario normal, especificado en el atributo "acción" del formulario.

JavaScript

jQuery(document).submit(function(e){
    var form = jQuery(e.target);
    if(form.is("#form-id")){ // check if this is the form that you want (delete this check to apply this to all forms)
        e.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: form.serialize(), // serializes the form's elements.
            success: function(data) {
                console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
            }
        });
    }
});

Quería editar la respuesta de Alfrekjv, pero me desvié demasiado de ella, así que decidí publicar esto como una respuesta separada.

No envía archivos, no admite botones, por ejemplo, hacer clic en un botón (incluido un botón de envío) envía su valor como datos de formulario, pero debido a que se trata de una solicitud ajax, el clic del botón no se enviará.

Para admitir botones, puede capturar el clic real del botón en lugar del envío.

jQuery(document).click(function(e){
    var self = jQuery(e.target);
    if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){
        e.preventDefault();
        var form = self.closest('form'), formdata = form.serialize();
        //add the clicked button to the form data
        if(self.attr('name')){
            formdata += (formdata!=='')? '&':'';
            formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
        }
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: formdata, 
            success: function(data) {
                console.log(data);
            }
        });
    }
});

En el lado del servidor puedes detectar una solicitud ajax con este encabezado que establece jquery HTTP_X_REQUESTED_WITH para php

PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //is ajax
}

Este código funciona incluso con la entrada de archivos.

$(document).on("submit", "form", function(event)
{
    event.preventDefault();        
    $.ajax({
        url: $(this).attr("action"),
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        },
        error: function (xhr, desc, err)
        {


        }
    });        
});

realmente me gustó esta respuesta by superluminario y especialmente la forma en que envolvió es una solución en un jQuery enchufar. Asi que gracias a superluminario para una respuesta muy útil. En mi caso, sin embargo, quería un complemento que me permitiera definir el comercial y error manejadores de eventos por medio de opciones cuando se inicializa el complemento.

Así que esto es lo que se me ocurrió:

;(function(defaults, $, undefined) {
    var getSubmitHandler = function(onsubmit, success, error) {
        return function(event) {
            if (typeof onsubmit === 'function') {
                onsubmit.call(this, event);
            }
            var form = $(this);
            $.ajax({
                type: form.attr('method'),
                url: form.attr('action'),
                data: form.serialize()
            }).done(function() {
                if (typeof success === 'function') {
                    success.apply(this, arguments);
                }
            }).fail(function() {
                if (typeof error === 'function') {
                    error.apply(this, arguments);
                }
            });
            event.preventDefault();
        };
    };
    $.fn.extend({
        // Usage:
        // jQuery(selector).ajaxForm({ 
        //                              onsubmit:function() {},
        //                              success:function() {}, 
        //                              error: function() {} 
        //                           });
        ajaxForm : function(options) {
            options = $.extend({}, defaults, options);
            return $(this).each(function() {
                $(this).submit(getSubmitHandler(options['onsubmit'], options['success'], options['error']));
            });
        }
    });
})({}, jQuery);

Este complemento me permite "ajaxificar" formularios html en la página y proporcionar onsubmit, comercial y error controladores de eventos para implementar comentarios al usuario sobre el estado del envío del formulario. Esto permitió que el complemento se usara de la siguiente manera:

 $('form').ajaxForm({
      onsubmit: function(event) {
          // User submitted the form
      },
      success: function(data, textStatus, jqXHR) {
          // The form was successfully submitted
      },
      error: function(jqXHR, textStatus, errorThrown) {
          // The submit action failed
      }
 });

Tenga en cuenta que comercial y error Los controladores de eventos reciben los mismos argumentos que recibirías de los eventos correspondientes del jQuery ajax método.

Tengo lo siguiente para mí:

formSubmit('#login-form', '/api/user/login', '/members/');

donde

function formSubmit(form, url, target) {
    $(form).submit(function(event) {
        $.post(url, $(form).serialize())
            .done(function(res) {
                if (res.success) {
                    window.location = target;
                }
                else {
                    alert(res.error);
                }
            })
            .fail(function(res) {
                alert("Server Error: " + res.status + " " + res.statusText);

            })
        event.preventDefault();
    });
}

Esto supone que la publicación en 'url' devuelve un ajax en forma de {success: false, error:'my Error to display'}

Puede variar esto como desee. Siéntase libre de usar ese fragmento.

Formulario de envío de jQuery AJAX, no es más que enviar un formulario utilizando la identificación del formulario cuando hace clic en un botón

Siga los pasos

Paso 1: la etiqueta del formulario debe tener un campo de identificación

<form method="post" class="form-horizontal" action="test/user/add" id="submitForm">
.....
</form>

Botón en el que vas a hacer clic

<button>Save</button>

Paso 2 - enviar El evento está en jQuery, lo que ayuda a enviar un formulario. en el siguiente código, estamos preparando la solicitud JSON del elemento HTML nombre .

$("#submitForm").submit(function(e) {
    e.preventDefault();
    var frm = $("#submitForm");
    var data = {};
    $.each(this, function(i, v){
        var input = $(v);
        data[input.attr("name")] = input.val();
        delete data["undefined"];
    });
    $.ajax({
        contentType:"application/json; charset=utf-8",
        type:frm.attr("method"),
        url:frm.attr("action"),
        dataType:'json',
        data:JSON.stringify(data),
        success:function(data) {
            alert(data.message);
        }
    });
});

para la demostración en vivo, haga clic en el enlace de abajo

¿Cómo enviar un formulario usando jQuery AJAX?

Sé que esto es un jQuery pregunta relacionada, pero ahora con JS ES6 las cosas son mucho más fáciles. Ya que no hay puro javascript respuesta, pensé que podría agregar un simple puro javascript solución a esto, que en mi opinión es mucho más limpia, utilizando el fetch() API. Esta es una forma moderna de implementar solicitudes de red. En su caso, dado que ya tiene un elemento de formulario, simplemente podemos usarlo para construir nuestra solicitud.

const form = document.forms["orderproductForm"];
const formInputs = form.getElementsByTagName("input"); 
let formData = new FormData(); 
for (let input of formInputs) {
    formData.append(input.name, input.value); 
}

fetch(form.action,
    {
        method: form.method,
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error.message))
    .finally(() => console.log("Done"));

Considere usar closest

$('table+table form').closest('tr').filter(':not(:last-child)').submit(function (ev, frm) {
        frm = $(ev.target).closest('form');
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert(data);
            }
        })
        ev.preventDefault();
    });

Para evitar múltiples envíos de formdata:

No olvide desvincular el evento de envío, antes de que el formulario se envíe nuevamente, el usuario puede llamar a la función sumbit más de una vez, tal vez olvidó algo o fue un error de validación.

 $("#idForm").unbind().submit( function(e) {
  ....

Si estás usando formulario.serialize (): debe darle a cada elemento del formulario un nombre como este:

<input id="firstName" name="firstName" ...

Y el formulario se serializa así:

firstName=Chris&lastName=Halcrow ...

Puede usar esto en la función de envío como se muestra a continuación.

Formulario HTML

<form class="form" action="" method="post">
    <input type="text" name="name" id="name" >
    <textarea name="text" id="message" placeholder="Write something to us"> </textarea>
    <input type="button" onclick="return formSubmit();" value="Send">
</form>

Función jQuery:

<script>
    function formSubmit(){
        var name = document.getElementById("name").value;
        var message = document.getElementById("message").value;
        var dataString = 'name='+ name + '&message=' + message;
        jQuery.ajax({
            url: "submit.php",
            data: dataString,
            type: "POST",
            success: function(data){
                $("#myForm").html(data);
            },
            error: function (){}
        });
    return true;
    }
</script>

Para obtener más detalles y una visita de muestra: http://www.spiderscode.com/simple-ajax-contact-form/

Intente

fetch(form.action,{method:'post', body: new FormData(form)});

function send(e,form) {
  fetch(form.action,{method:'post', body: new FormData(form)});

  console.log('We submit form asynchronously (AJAX)');
  e.preventDefault();
}

<form method="POST" action="myapi/send" onsubmit="send(event,this)" name="orderproductForm">
    <input hidden name="csrfToken" value="$0meh@$h">
    <input name="email" value="aa@bb.com">
    <input name="phone" value="123-456-666">
    <input type="submit">    
</form>

Look on Chrome Console > Network after/before 'submit'

Esta no es la respuesta a la pregunta de OP,
pero en caso de que no pueda usar el formulario DOM estático, también puede intentar así.

var $form = $('<form/>').append(
    $('<input/>', {name: 'username'}).val('John Doe'),
    $('<input/>', {name: 'user_id'}).val('john.1234')
);

$.ajax({
    url: 'api/user/search',
    type: 'POST',
    contentType: 'application/x-www-form-urlencoded',
    data: $form.serialize(),
    success: function(data, textStatus, jqXHR) {
        console.info(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        var errorMessage = jqXHR.responseText;
        if (errorMessage.length > 0) {
            alert(errorMessage);
        }
    }
});

Me sorprende que nadie mencione data como un objeto. Para mí, es la forma más limpia y sencilla de pasar datos:

$('form#foo').submit(function () {
    $.ajax({
        url: 'http://foo.bar/some-ajax-script',
        type: 'POST',
        dataType: 'json',
        data: {
            'foo': 'some-foo-value',
            'bar': $('#bar').val()
        }
    }).always(function (response) {
        console.log(response);
    });

    return false;
});

Luego, en el backend:

// Example in PHP
$_POST['foo'] // some-foo-value
$_POST['bar'] // value in #bar

JavaScript

(function ($) {
    var form= $('#add-form'),
      input = $('#exampleFormControlTextarea1');


   form.submit(function(event) {

       event.preventDefault(); 

       var req = $.ajax({
           url: form.attr('action'),
           type: 'POST',
           data: form.serialize()
       });
    req.done(function(data) {
       if (data === 'success') {
           var li = $('<li class="list-group-item">'+ input.val() +'</li>');
            li.hide()
                .appendTo('.list-group')
                .fadeIn();
            $('input[type="text"],textarea').val('');
        }
   });
});


}(jQuery));

HTML

    <ul class="list-group col-sm-6 float-left">
            <?php
            foreach ($data as $item) {
                echo '<li class="list-group-item">'.$item.'</li>';
            }
            ?>
        </ul>

        <form id="add-form" class="col-sm-6 float-right" action="_inc/add-new.php" method="post">
            <p class="form-group">
                <textarea class="form-control" name="message" id="exampleFormControlTextarea1" rows="3" placeholder="Is there something new?"></textarea>
            </p>
            <button type="submit" class="btn btn-danger">Add new item</button>
        </form>

También está el evento de envío, que se puede activar así $ ("# form_id"). Submit (). Usaría este método si el formulario ya está bien representado en HTML. Simplemente leería en la página, llenaría las entradas del formulario con cosas y luego llamaría a .submit (). Utilizará el método y la acción definidos en la declaración del formulario, por lo que no es necesario que lo copie en su javascript.

ejemplos