jQuery AJAX Formular abschicken

Question

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

Ich möchte eine Art von jQuery.get oder Ajax oder irgendetwas in der Art tun, die eine Seite durch Ajax aufrufen würde, und senden Sie alle Eingaben des Formulars entlang orderproductForm .

Ich nehme an, eine Möglichkeit wäre, etwas wie folgt zu tun

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

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

Answer 1

Dies ist ein einfacher Hinweis:

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

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

    var form = $(this);
    var actionUrl = form.attr('action');

    $.ajax({
        type: "POST",
        url: actionUrl,
        data: form.serialize(), // serializes the form's elements.
        success: function(data)
        {
          alert(data); // show response from the php script.
        }
    });

});

Answer 2

Sie können die Funktionen ajaxForm/ajaxSubmit von Ajax-Formular-Plugin oder die jQuery-Funktion serialize.

AjaxFormular :

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

o

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

ajaxForm sendet, wenn die Schaltfläche "Submit" gedrückt wird. ajaxSubmit sendet sofort.

Serialisieren :

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

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

Die Dokumentation zur AJAX-Serialisierung finden Sie hier .

Answer 3

Eine weitere ähnliche Lösung ist die Verwendung von Attributen, die auf dem 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>

Answer 4

Es gibt ein paar Dinge, die Sie beachten sollten.

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

• über die Schaltfläche "Absenden
• durch Drücken der Eingabetaste
• durch Auslösen eines Submit-Ereignisses in JavaScript
• möglicherweise mehr, je nach Gerät oder künftigem Gerät.

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

2. Hijax

Der Benutzer hat möglicherweise JavaScript nicht aktiviert. A hijax Muster ist hier gut, wo wir sanft die Kontrolle über das Formular mit JavaScript, aber lassen Sie es submittable, wenn JavaScript fehlschlägt.

Wir sollten die URL und die Methode aus dem Formular ziehen, damit wir bei einer Änderung des HTML-Code das JavaScript nicht aktualisieren müssen.

3. Unaufdringliches JavaScript

Verwendung von event.preventDefault() 代わりに return false ist eine gute Praxis, da sie das Ereignis in die Höhe schnellen lässt. Dadurch können andere Skripte mit dem Ereignis verknüpft werden, z. B. Analyseskripte, die Benutzerinteraktionen überwachen können.

Geschwindigkeit

Idealerweise sollten wir ein externes Skript verwenden, anstatt unser Skript inline einzufügen. Wir können einen Link zu diesem Skript im Kopfbereich der Seite mit einem Skript-Tag einfügen oder es am Ende der Seite verlinken, um die Geschwindigkeit zu erhöhen. Das Skript sollte die Benutzerfreundlichkeit erhöhen und nicht im Weg stehen.

Code

Angenommen, Sie sind mit all dem oben genannten einverstanden, und Sie möchten das Submit-Ereignis abfangen und es über AJAX (ein Hijax-Muster) behandeln, könnten Sie etwas wie folgt 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 die Übermittlung eines Formulars manuell über JavaScript auslösen, wann immer Sie wollen, z. B. mit

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

Editar:

Ich musste dies kürzlich tun und habe ein Plugin geschrieben.

(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 ein data-autosubmit-Attribut zu Ihrem Formular-Tag hinzu, und Sie können dies dann tun:

HTML

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

JS

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

Answer 5

Sie können auch Folgendes verwenden FormularDaten (Aber nicht im 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 verwenden Sie FormularDaten .