Frage jQuery AJAX-Formular absenden


Ich habe ein Formular mit Namen orderproductForm und eine undefinierte Anzahl von Eingängen.

Ich möchte eine Art von jQuery.get oder Ajax oder etwas ähnliches tun, das eine Seite über Ajax aufruft und alle Eingaben des Formulars mitschickt orderproductForm.

Ich denke, ein Weg wäre, etwas wie zu tun

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

Allerdings kenne ich nicht genau alle Formulareingaben. Gibt es ein Feature, eine Funktion oder etwas, das einfach ALLE Formulareingaben sendet?


738
2017-12-25 01:31


Ursprung


Antworten:


Sie können die Funktionen ajaxForm / ajaxSubmit verwenden Ajax-Formular-Plugin oder die jQuery-Serialisierungsfunktion.

AjaxForm:

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

oder

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

ajaxForm wird gesendet, wenn der Submit-Button gedrückt wird. ajaxSubmit sendet sofort.

Serialisieren:

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

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

AJAX-Serialisierungsdokumentation ist hier.


687
2017-12-25 01:36



Dies ist eine einfache Referenz:

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

Ich hoffe es hilft dir.


1089
2017-08-05 17:57



Eine weitere ähnliche Lösung, die Attribute verwendet, die im Formularelement definiert sind:

<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



Es gibt ein paar Dinge, die Sie beachten müssen.

1. Es gibt mehrere Möglichkeiten, ein Formular einzureichen

  • Verwenden Sie den Senden-Button
  • durch Drücken der Eingabetaste
  • durch Auslösen eines Submit-Ereignisses in JavaScript
  • möglicherweise mehr je nach Gerät oder zukünftigem Gerät.

Wir sollten uns daher an die Formular senden Ereignis, nicht das Klickereignis. Dadurch wird sichergestellt, dass unser Code jetzt und in Zukunft auf allen Geräten und unterstützenden Technologien funktioniert.

2. Hijax

Der Benutzer hat möglicherweise kein JavaScript aktiviert. EIN Hijax Das Muster ist hier gut, wo wir die Kontrolle über das Formular mit Hilfe von JavaScript übernehmen, es jedoch übergabefähig lassen, wenn JavaScript fehlschlägt.

Wir sollten die URL und die Methode aus dem Formular ziehen. Wenn sich der HTML-Code ändert, müssen wir das JavaScript nicht aktualisieren.

3. Unaufdringliches JavaScript

Verwenden event.preventDefault () Anstatt von falsch zurückgeben ist eine gute Übung, da es die Veranstaltung aufblähen lässt. Dadurch können andere Skripts in das Ereignis eingebunden werden, z. B. Analyseskripts, die Benutzerinteraktionen überwachen können.

Geschwindigkeit

Wir sollten idealerweise ein externes Skript verwenden, anstatt unser Skript inline einzufügen. Wir können im Kopfbereich der Seite mit einem Script-Tag darauf verlinken oder unten auf der Seite auf Geschwindigkeit verlinken. Das Skript sollte die Benutzerfreundlichkeit ruhig verbessern, nicht in die Quere kommen.

Code

Angenommen, Sie stimmen dem oben Gesagten zu, und Sie möchten das Submit-Ereignis abfangen und es über AJAX (ein Hijax-Muster) behandeln, könnten Sie so etwas tun:

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

Sie können eine Formularübergabe jederzeit manuell über JavaScript auslösen, indem Sie Folgendes verwenden:

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

Bearbeiten:

Ich musste dies kürzlich tun und schrieb ein 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)

Fügen Sie Ihrem Formular-Tag ein Datenautomatik-Attribut hinzu, und Sie können Folgendes tun:

HTML

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

JS

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

162
2018-01-19 18:52



Sie können auch verwenden Formulardaten (Aber nicht in IE verfügbar):

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

So benutzen Sie Formulardaten.


26
2017-07-10 09:35



Einfache Version (sendet keine Bilder)

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

Kopieren und fügen Sie eine Umschichtung eines Formulars oder aller Formulare auf einer Seite ein

Es ist eine modifizierte Version von Alfrekjvs Antworten

  • Es wird mit jQuery> = 1.3.2 funktionieren
  • Sie können dies ausführen, bevor das Dokument bereit ist
  • Sie können das Formular entfernen und erneut hinzufügen und es wird weiterhin funktionieren
  • Es wird an den gleichen Ort wie das normale Formular, angegeben in das Attribut "Aktion" des Formulars

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

Ich wollte Alfrekjvs Antwort bearbeiten, aber zu sehr davon abweichen, also habe ich beschlossen, dies als separate Antwort zu veröffentlichen.

Dateien werden nicht gesendet, Schaltflächen werden nicht unterstützt. Wenn Sie beispielsweise auf eine Schaltfläche klicken (einschließlich einer Schaltfläche zum Senden), wird der Wert als Formulardaten gesendet. Da es sich jedoch um eine AJAX-Anforderung handelt, wird der Schaltflächenklick nicht gesendet.

Um Schaltflächen zu unterstützen, können Sie den tatsächlichen Button-Klick statt des Sendens erfassen.

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

Auf der Serverseite können Sie eine Ajax-Anfrage erkennen Mit diesem Header setzt jquery HTTP_X_REQUESTED_WITH für PHP

PHP

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

24
2018-02-07 19:35



Dieser Code funktioniert auch bei der Dateieingabe

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



ich mochte wirklich diese Antwort durch Superluminarie und vor allem die Art, wie er gewickelt hat, ist die Lösung in einem jQuery Plugin. Also danke Superluminarie für eine sehr nützliche Antwort. In meinem Fall wollte ich jedoch ein Plugin, mit dem ich das definieren kann Erfolg und Error Event-Handler über Optionen bei der Initialisierung des Plugins.

Also hier ist, was ich erfunden habe:

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

Dieses Plugin erlaubt es mir sehr einfach HTML-Formulare auf der Seite zu "ajaxifizieren" und bereitzustellen onsubmit, Erfolg und Error Event-Handler zum Implementieren von Feedback an den Benutzer des Status des Formulars submit. Dadurch konnte das Plugin wie folgt verwendet werden:

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

Notiere dass der Erfolg und Error Ereignishandler erhalten die gleichen Argumente, die Sie von den entsprechenden Ereignissen des jQuery  Ajax Methode.


11
2018-01-21 20:47



Ich habe folgendes für mich:

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

woher

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

Dies setzt voraus, dass der Post zu 'url' einen Ajax in Form von zurückgibt {success: false, error:'my Error to display'}

Sie können dies nach Belieben variieren. Fühlen Sie sich frei, dieses Snippet zu verwenden.


9
2017-10-26 10:49



in Betracht ziehen zu verwenden 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



Um zu vermeiden, dass mehrere Formdaten gesendet werden:

Vergessen Sie nicht, das Submit-Ereignis zu bestätigen, bevor das Formular erneut eingereicht wird. Der Benutzer kann die Sumitfunktion mehr als einmal aufrufen, vielleicht hat er etwas vergessen oder war ein Validierungsfehler.

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

4
2018-04-26 23:48