jQuery AJAX invia modulo

Ho un modulo con nome orderproductForm e un numero indefinito di input.

Voglio fare una sorta di jQuery.get o Ajax o qualcosa del genere che chiamerebbe una pagina attraverso Ajax, e inviare lungo tutti gli input del modulo orderproductForm .

Suppongo che un modo sarebbe di fare qualcosa di simile

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

Tuttavia non conosco esattamente tutti gli input del modulo. Esiste una funzionalità, una funzione o qualcosa che invierebbe TUTTI gli input del modulo?

    È ansible utilizzare le funzioni ajaxForm / ajaxSubmit da Ajax Form Plugin o dalla funzione serialize jQuery.

    AjaxForm :

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

    o

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

    ajaxForm invierà quando viene premuto il pulsante di invio. ajaxSubmit invia immediatamente.

    Serializzare :

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

    La documentazione di serializzazione AJAX è qui .

    Questo è un riferimento semplice:

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

    Spero che ti aiuti.

    Un’altra soluzione simile che utilizza attributi definiti sull’elemento form:

     

    Ci sono alcune cose che devi tenere a mente.

    1. Esistono diversi modi per inviare un modulo

    • utilizzando il pulsante di invio
    • premendo invio
    • triggersndo un evento di invio in JavaScript
    • possibilmente più a seconda del dispositivo o del dispositivo futuro.

    Dovremmo pertanto associare l’ evento di invio del modulo , non l’evento di clic del pulsante. Ciò garantirà che il nostro codice funzioni su tutti i dispositivi e le tecnologie di assistenza ora e in futuro.

    2. Hijax

    L’utente non può avere abilitato JavaScript. Un modello di hijax è buono qui, dove prendiamo delicatamente il controllo del modulo usando JavaScript, ma lascialo sottomesso se JavaScript fallisce.

    Dovremmo estrarre l’URL e il metodo dal modulo, quindi se l’HTML cambia, non è necessario aggiornare JavaScript.

    3. JavaScript discreto

    L’utilizzo di event.preventDefault () invece di return false è una buona pratica in quanto consente all’evento di esplodere. Ciò consente ad altri script di collegarsi all’evento, ad esempio gli script di analisi che potrebbero monitorare le interazioni dell’utente.

    Velocità

    Dovremmo idealmente usare uno script esterno, piuttosto che inserire il nostro script in linea. Possiamo collegarci a questo nella sezione principale della pagina usando un tag script o collegandoci in fondo alla pagina per la velocità. Lo script dovrebbe migliorare silenziosamente l’esperienza dell’utente, non intralciarlo.

    Codice

    Supponendo che tu sia d’accordo con quanto sopra, e vuoi prendere l’evento submit e gestirlo tramite AJAX (un modello hijax), potresti fare qualcosa di simile a questo:

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

    Puoi triggersre manualmente l’invio di un modulo ogni volta che vuoi tramite JavaScript usando qualcosa come:

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

    Modificare:

    Di recente ho dovuto farlo e ho finito per scrivere un 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) 

    Aggiungi un attributo data-autosubmit al tuo tag form e puoi fare questo:

    HTML

     

    JS

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

    Puoi anche utilizzare FormData (ma non disponibile in 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)} }); 

    Questo è il modo in cui si utilizza FormData .

    Versione semplice (non invia immagini)

     
    ...

    Copia e incolla un’elezione di un modulo o di tutti i moduli su una pagina

    È una versione modificata della risposta di Alfrekjv

    • Funzionerà con jQuery> = 1.3.2
    • È ansible eseguire questo prima che il documento sia pronto
    • Puoi rimuovere e riaggiungere il modulo e funzionerà ancora
    • Pubblicherà nella stessa posizione del modulo normale, specificato nell’attributo “azione” del modulo

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

    Volevo modificare la risposta di Alfrekjv ma ho deviato troppo da esso, quindi ho deciso di postarlo come una risposta separata.

    Non invia file, non supporta i pulsanti, ad esempio facendo clic su un pulsante (incluso un pulsante di invio) invia il suo valore come dati del modulo, ma poiché si tratta di una richiesta Ajax il clic del pulsante non verrà inviato.

    Per supportare i pulsanti è ansible acquisire il clic del pulsante effettivo anziché il submit.

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

    Sul lato server è ansible rilevare una richiesta HTTP_X_REQUESTED_WITH con questa intestazione che jquery imposta HTTP_X_REQUESTED_WITH per php

    PHP

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

    Questo codice funziona anche con l’input di file

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

    Mi è piaciuta molto questa risposta da superluminare e soprattutto il modo in cui ha avvolto è la soluzione in un plugin jQuery . Quindi grazie al superluminare per una risposta molto utile. Nel mio caso, però, volevo un plugin che mi permettesse di definire i gestori di eventi di successo e di errore tramite le opzioni quando il plugin è inizializzato.

    Quindi ecco cosa mi è venuto in mente:

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

    Questo plugin mi consente di creare facilmente moduli html “ajaxify” nella pagina e di fornire gestori di eventi onsubmit , di successo ed errori per implementare feedback all’utente dello stato del modulo submit. Ciò ha permesso di usare il plugin come segue:

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

    Si noti che i gestori di eventi di successo ed errore ricevono gli stessi argomenti che si riceveranno dagli eventi corrispondenti del metodo jQuery ajax .

    Ho avuto il seguente per me:

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

    dove

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

    Questo presuppone che il post di ‘url’ restituisca un ajax nella forma di {success: false, error:'my Error to display'}

    Puoi variare ciò che vuoi. Sentiti libero di usare quello snippet.

    considera l’utilizzo 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(); }); 

    Per evitare più mandate di dati formali:

    Non dimenticare di non inviare l’evento di invio, prima che il modulo sia nuovamente inviato, l’utente può chiamare la funzione di sum più di una volta, forse ha dimenticato qualcosa o è stato un errore di convalida.

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

    Se stai usando form .serialize () – devi dare ad ogni elemento del modulo un nome come questo:

      

    E il modulo viene serializzato in questo modo:

     firstName=Chris&lastName=Halcrow ... 

    jQuery AJAX invia modulo , non è altro che inviare un modulo utilizzando l’ID modulo quando si fa clic su un pulsante

    Si prega di seguire i passaggi

    Passaggio 1: il tag del modulo deve avere un campo ID

     
    .....

    Pulsante che stai per fare clic

      

    Passaggio 2: inviare un evento è in jQuery che aiuta a inviare un modulo. nel codice seguente stiamo preparando la richiesta JSON dal nome dell’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); } }); }); 

    per la demo dal vivo clicca sul link qui sotto

    Come inviare un modulo utilizzando jQuery AJAX?

    È ansible utilizzare questo per la funzione di invio come di seguito.

    Modulo HTML

     

    Funzione jQuery:

      

    Per maggiori dettagli e visita campione: http://www.spiderscode.com/simple-ajax-contact-form/

    C’è anche l’evento submit, che può essere triggersto come $ (“# form_id”). Submit (). Dovresti utilizzare questo metodo se il modulo è già ben rappresentato in HTML. Dovresti solo leggere nella pagina, compilare gli input del modulo con contenuti, quindi chiamare .submit (). Utilizzerà il metodo e l’azione definiti nella dichiarazione del modulo, quindi non è necessario copiarlo in javascript.

    esempi