jQuery AJAX submeter o formulário

Esta é uma referência simples:

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

Outra solução semelhante utilizando atributos definidos no elemento form:

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

1. Existem várias maneiras de enviar um Formulário

• usando o botão enviar
• pressionando enter
• desencadeando um evento submit no JavaScript
• possivelmente mais dependendo do dispositivo ou do dispositivo futuro.

Devemos, portanto, ligar-nos ao formulário submeter evento, não ao evento botão clicar em evento. Isto irá garantir que o nosso código funciona em todos os dispositivos e assistência tecnologias agora e no futuro.

2. Hijax.

O Utilizador pode não ter o JavaScript activo. Um padrão hijax é bom aqui, onde tomamos suavemente o controle do formulário usando JavaScript, mas deixá-lo submisso se JavaScript falhar.

Devemos extrair a URL e o método do formulário, por isso, se o HTML mudar, não precisamos de actualizar o JavaScript.

3. JavaScript Discreto

Usando o evento.preventDefault () instead de devolver falso é uma boa prática, pois permite que o evento aumente de bolhas. Isto permite que outros scripts se conectem ao evento, por exemplo scripts analíticos que podem estar monitorando interações do Usuário.

Velocidade

O ideal seria usar um script externo, em vez de inserir o nosso script na linha. Podemos ligar para isso na seção cabeça da página usando uma tag script, ou link para ele na parte inferior da página para velocidade. O script deve melhorar silenciosamente a experiência do Usuário, não atrapalhar.

Código

Assumindo que concordas com tudo o que precede, e que queres apanhar o evento de envio, e lidar com ele através do AJAX( um padrão hijax), podes fazer algo do género:

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

Você pode activar manualmente um envio de formulários sempre que quiser através de JavaScript usando algo como:

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

Editar:

Recentemente tive de fazer isto e acabei por escrever um plugin.

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

Adicione um atributo data-autosubmit ao seu formulário tag e você pode então fazer isso:

HTML

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

JS

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

Também pode utilizar FormData (mas não disponível no 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)} 
});

É assim que se usa FormData .

A versão simples (não envia imagens)

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

Copiar e colar ajaxificação de uma forma ou de todas as formas numa página

• funcionará com jQuery > = 1.3.2
• podes executar isto antes que o documento esteja pronto
• você pode remover e voltar a adicionar o formulário e ele ainda vai funcionar
• será afixado no mesmo local que o formulário normal, especificado em a "acção"do formulário atributo

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

Não envia ficheiros, não suporta botões, por exemplo se carregar num botão (incluindo um botão enviar) envia o seu valor como dados do formulário, mas como este é um pedido ajax, o botão não será enviado.

Para suportar os botões, poderá capturar o botão actual, carregue em vez do botão enviar.

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

Do lado do servidor, você pode detectar um pedido ajax com este cabeçalho que o jquery define 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 mesmo com a entrada de ficheiros

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


        }
    });        
});

Eu realmente gostei desta resposta por superluminário {[[5]} e especialmente a forma como ele embrulhou é a solução em umjQuery plugin. Por isso, obrigado à superluminação por uma resposta muito útil. No meu caso, porém, eu queria um plugin que me permita definir o a sucesso e erro manipuladores de eventos por meio de opções quando o plugin é inicializado.

;(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 plugin permite-me muito facilmente formulários html" ajaxify " na página e fornecer onsubmit, success and error {[[9]} event handlers for implementing feedback to the user of the status of the form submit. Isto permitiu que o plugin fosse usado do seguinte modo:

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

Note que a sucesso e erro manipuladores de eventos recebe os mesmos argumentos que você receberia dos eventos correspondentes do jQuery ajax método.

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

Em que

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

Isto assume que o post para ' url ' devolve um ajax na forma de {success: false, error:'my Error to display'}

Considere a utilização de {MM / AAAA}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();
    });

JQuery AJAX submit form , não é mais do que enviar um formulário usando o ID do formulário quando você clicar em um botão

Por favor, siga os passos

A etiqueta do Passo 1 deve ter um campo ID

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

Botão em que vai clicar

<button>Save</button>

Passo 2 - submeter o evento está no jQuery que ajuda a enviar um formulário. em baixo Código, estamos a preparar o pedido JSON do elemento HTML name .

$("#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 a demonstração ao vivo, clique em baixo link

Como? para enviar um formulário usando jQuery AJAX?

Para evitar múltiplos formdata envia:

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

Se estiver a utilizar o Formulário .serialize () - você precisa dar a cada elemento do formulário um nome como este:

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

firstName=Chris&lastName=Halcrow ...

Pode usar isto na função submit como em baixo.

HTML Form

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

Função 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 mais detalhes e visita de amostras: http://www.spiderscode.com/simple-ajax-contact-form/

Existe também o evento submit, que pode ser despoletado como este $("#form_id").enviar(). Você usaria este método se o formulário já estiver bem representado em HTML. Lia-se na página, preenchia-se o formulário com coisas e ligava-se .enviar(). Ele vai usar o método e ação definidos na declaração do formulário, para que você não precisa copiá-lo em seu javascript.

Exemplos