Pregunta jQuery AJAX enviar formulario


Tengo un formulario con nombre orderproductForm y un número indefinido de entradas.

Quiero hacer algún tipo de jQuery.get o ajax o algo así que llame a una página a través de Ajax y envíe todas las entradas del formulario orderproductForm.

Supongo que una forma sería hacer algo como

jQuery.get("myurl",
          {action : document.orderproductForm.action.value,
           cartproductid : document.orderproductForm.cartproductid.value,
           productid : document.orderproductForm.productid.value,
           ...

Sin embargo, no sé exactamente todas las entradas del formulario. ¿Hay alguna característica, función o algo que simplemente envíe TODAS las entradas del formulario?


738
2017-12-25 01:31


origen


Respuestas:


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

AjaxForm:

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

o

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

ajaxForm enviará cuando se presiona el botón de enviar. ajaxSubmit envía de inmediato.

Publicar por fascículos:

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

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

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


687
2017-12-25 01:36



Esta es una referencia simple:

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


    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.
           }
         });

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

Espero que te ayude.


1089
2017-08-05 17:57



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

<form id="contactForm1" action="/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>

421
2018-05-07 12:44



Hay algunas cosas que debes 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, deberíamos unirnos a la formulario enviar evento, no el evento de clic de botón. Esto asegurará que nuestro código funcione en todos los dispositivos y tecnologías de asistencia ahora y en el futuro.

2. Hijax

El usuario puede no tener JavaScript habilitado. UN hijax el patrón es bueno aquí, donde tomamos el control del formulario gentilmente usando JavaScript, pero lo podemos enviar si falla JavaScript.

Deberíamos extraer la URL y el método del formulario, de modo que si el HTML cambia, no necesitamos actualizar el JavaScript.

3. JavaScript discreto

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

Velocidad

Idealmente, deberíamos utilizar un script externo, en lugar de insertar nuestro script en línea. Podemos vincular esto en la sección de encabezado de la página utilizando una etiqueta de secuencia de comandos, o un enlace a la misma en la parte inferior de la página para mayor velocidad. La secuencia de comandos debe mejorar silenciosamente la experiencia del usuario, no interponerse en el camino.

Código

Suponiendo que está de acuerdo con todo lo anterior, y desea atrapar 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');
});

Editar:

Hace poco 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 carga de datos a su etiqueta de formulario y puede hacer esto:

HTML

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

JS

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

162
2018-01-19 18:52



También puedes usar FormData (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 FormData.


26
2017-07-10 09:35



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

<form action="/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 responder

  • 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 la forma normal, especificada 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é mucho de ella, así que decidí publicar esto como una respuesta separada.

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

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);
            }
        });
    }
});

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

PHP

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

24
2018-02-07 19:35



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)
        {


        }
    });        
});

20
2017-11-12 23:06



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

Así que aquí 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" fácilmente los formularios html en la página y proporcionar onsubmit, éxito y error manejadores de eventos para implementar la retroalimentación al usuario del estado del envío del formulario. Esto permitió que el complemento se use 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 éxito y error los manejadores de eventos reciben los mismos argumentos que recibiría de los eventos correspondientes del jQuery  ajax método.


11
2018-01-21 20:47



Obtuve lo siguiente para mí:

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

dónde

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 a 'url' devuelve un ajax en forma de {success: false, error:'my Error to display'}

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


9
2017-10-26 10:49



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();
    });

5
2017-11-13 18:43