Formulário de envio do jQuery AJAX

Eu tenho um formulário com o nome orderproductForm e um número indefinido de inputs.

Eu quero fazer algum tipo de jQuery.get ou ajax ou qualquer coisa assim que iria chamar uma página através do Ajax, e enviar todas as inputs do formulário orderproductForm .

Eu suponho que um caminho seria fazer algo como

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

No entanto, eu não sei exatamente todas as inputs do formulário. Existe um recurso, function ou algo que apenas enviaria TODAS as inputs do formulário?

Você pode usar as funções ajaxForm / ajaxSubmit do Ajax Form Plugin ou da function de serialização jQuery.

AjaxForm :

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

ou

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

ajaxForm enviará quando o botão enviar for pressionado. ajaxSubmit envia imediatamente.

Serialize :

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

A documentação de serialização AJAX está aqui .

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

Espero que ajude você.

Outra solução semelhante usando atributos definidos no elemento de formulário:

 

Existem algumas coisas que você precisa ter em mente.

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

  • usando o botão enviar
  • pressionando enter
  • acionando um evento de envio em JavaScript
  • possivelmente mais, dependendo do dispositivo ou do futuro dispositivo.

Portanto, devemos nos vincular ao evento de envio de formulário , não ao evento de clique de botão. Isso garantirá que nosso código funcione em todos os dispositivos e tecnologias assistivas agora e no futuro.

2. Hijax

O usuário pode não ter o JavaScript ativado. Um padrão hijax é bom aqui, onde tomamos o controle do formulário usando JavaScript, mas deixá-lo submetível se o JavaScript falhar.

Devemos extrair o URL e o método do formulário, portanto, se o HTML for alterado, não será necessário atualizar o JavaScript.

3. JavaScript não intrusivo

Usar event.preventDefault () em vez de return false é uma boa prática, pois permite que o evento seja expandido. Isso permite que outros scripts se vinculem ao evento, por exemplo, scripts de análise que podem monitorar as interações do usuário.

Rapidez

Devemos idealmente usar um script externo, em vez de inserir nosso script em linha. Podemos criar um link para isso na seção principal da página usando uma tag de script ou um link para ela na parte inferior da página para obter velocidade. O script deve melhorar silenciosamente a experiência do usuário, não atrapalhar.

Código

Assumindo que você concorda com todos os itens acima, e quer pegar o evento submit, e lidar com isso via AJAX (um padrão hijax), você poderia fazer algo assim:

 $(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 acionar manualmente o envio de um formulário sempre que desejar via JavaScript usando algo como:

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

Editar:

Eu recentemente tive que fazer isso e acabei escrevendo 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 à sua tag de formulário e você poderá fazer isso:

HTML

 

JS

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

Você também pode usar 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 você usa FormData .

Versão simples (não envia imagens)

 
...

Copie e cole um ajaxification de um formulário ou de todos os formulários em uma página

É uma versão modificada da resposta de Alfrekjv

  • Ele funcionará com jQuery> = 1.3.2
  • Você pode executar isso antes que o documento esteja pronto
  • Você pode remover e adicionar novamente o formulário e ele ainda funcionará
  • Ele será postado no mesmo local que o formulário normal, especificado no atributo “action” do formulário

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

Eu queria editar a resposta de Alfrekjv, mas desviei muito dela, então decidi postar isso como uma resposta separada.

Não envia arquivos, não suporta botões, por exemplo, clicar em um botão (incluindo um botão de envio) envia seu valor como dados de formulário, mas como essa é uma solicitação de ajax, o clique do botão não será enviado.

Para suportar botões, você pode capturar o clique real do botão em vez do envio.

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

No lado do servidor você pode detectar um pedido de ajax com este header que 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 input de arquivo

 $(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ária e, especialmente, a maneira como ele envolveu a solução em um plugin jQuery . Então, graças ao superluminário para uma resposta muito útil. No meu caso, porém, eu queria um plugin que me permitisse definir os manipuladores de events de sucesso e erro por meio de opções quando o plug-in fosse inicializado.

Então, aqui está o que eu criei:

 ;(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 me permite facilmente “ajaxificar” formulários html na página e fornecer manipuladores de events onsubmit , success e error para a implementação de feedback para o usuário do status do envio do formulário. Isso permitiu que o plugin fosse usado da seguinte maneira:

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

Observe que os manipuladores de evento de sucesso e erro recebem os mesmos argumentos que você receberia dos events correspondentes do método ajax do jQuery .

Eu tenho o seguinte para mim:

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

Onde

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

Isso pressupõe que a postagem para ‘url’ retorne um ajax na forma de {success: false, error:'my Error to display'}

Você pode variar isso como quiser. Sinta-se à vontade para usar esse trecho.

considere o uso 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 vários envios de formdata:

Não se esqueça de desvincular o evento submit, antes que o formulário seja enviado novamente, o usuário pode chamar a function sumbit mais de uma vez, talvez ele tenha esquecido alguma coisa ou tenha sido um erro de validação.

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

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

  

E o formulário é serializado assim:

 firstName=Chris&lastName=Halcrow ... 

jQuery AJAX enviar formulário , não é nada, mas enviar um formulário usando o ID do formulário quando você clica em um botão

Por favor, siga os passos

Etapa 1: a tag de formulário deve ter um campo de ID

 
.....

Botão que você vai clicar

  

Etapa 2 – o envio do evento está no jQuery, que ajuda a enviar um formulário. No código abaixo, estamos preparando a solicitação JSON do nome do elemento HTML.

 $("#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 demonstração ao vivo clique no link abaixo

Como enviar um formulário usando o jQuery AJAX?

Você pode usar isso na function de envio como abaixo.

Formulário HTML

 

function jQuery:

  

Para mais detalhes e amostra, visite: http://www.spiderscode.com/simple-ajax-contact-form/

Há também o evento submit, que pode ser acionado assim $ (“# form_id”). Submit (). Você usaria esse método se o formulário já estivesse bem representado em HTML. Você acabou de ler a página, preencher as inputs do formulário com material e, em seguida, chamar .submit (). Ele usará o método e a ação definidos na declaração do formulário, para que você não precise copiá-lo no seu javascript.

exemplos