it-swarm.com.de

jQuery AJAX Formular senden

Ich habe ein Formular mit dem Namen orderproductForm und einer undefinierten Anzahl von Eingaben.

Ich möchte eine Art von jQuery.get oder Ajax oder so etwas machen, das eine Seite über Ajax aufruft und alle Eingaben des Formulars orderproductForm mitsendet. .

Ich nehme an, eine Möglichkeit wäre, so etwas 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 nur ALLE Formulareingaben sendet?

866
Nathan H

Sie können die Funktionen ajaxForm/ajaxSubmit von Ajax Form Plugin oder der Funktion jQuery serialize verwenden.

AjaxForm :

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

oder

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

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

Serialize :

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

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

Die Dokumentation zur AJAX-Serialisierung finden Sie hier .

773
jspcal

Dies ist eine einfache Referenz:

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


});

Ich hoffe es hilft dir.

1290
Alfrekjv

Eine andere ähnliche Lösung unter Verwendung von Attributen, die für das Formularelement definiert wurden:

<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>
445
Davide Icardi

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

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

  • verwenden Sie die Schaltfläche "Senden"
  • 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 das form submit event binden, nicht an das button click event. 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 Muster ist hier gut, wo wir die Kontrolle über das Formular mit JavaScript sanft übernehmen, es aber einreichbar 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.

. Unauffälliges JavaScript

Die Verwendung von event.preventDefault () anstelle von return false ist eine gute Vorgehensweise, da dadurch das Ereignis in die Luft sprudeln kann. Auf diese Weise können andere Skripte in das Ereignis eingebunden werden, z. B. Analyseskripte, die Benutzerinteraktionen überwachen.

Geschwindigkeit

Wir sollten im Idealfall ein externes Skript verwenden, anstatt unser Skript inline einzufügen. Wir können im Kopfbereich der Seite mit einem Skript-Tag darauf verweisen oder aus Gründen der Geschwindigkeit unten auf der Seite darauf verweisen. Das Skript sollte die Benutzererfahrung im Hintergrund verbessern und nicht stören.

Code

Angenommen, Sie stimmen den obigen Aussagen zu und möchten das Submit-Ereignis abfangen und über AJAX (ein Hijax-Muster) verarbeiten.

$(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übermittlung 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 am Ende 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 Daten-Autosubmit-Attribut 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();
});
172
superluminary

Sie können auch FormData verwenden (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 FormData .

40
macio.Jun

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>

Ajaxification eines Formulars oder aller Formulare auf einer Seite kopieren und einfügen

Es ist eine modifizierte Version von Alfrekjv's answer

  • Es funktioniert mit jQuery> = 1.3.2
  • Sie können dies ausführen, bevor das Dokument fertig ist
  • Sie können das Formular entfernen und erneut hinzufügen, und es wird weiterhin funktionieren
  • Es wird an den gleichen Speicherort wie das normale Formular gesendet, der im Attribut "action" des Formulars angegeben ist

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 die Antwort von Alfrekjv bearbeiten, bin aber zu weit davon abgewichen. Deshalb habe ich beschlossen, diese Antwort als separate Antwort zu veröffentlichen.

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

Um Schaltflächen zu unterstützen, können Sie den tatsächlichen Schaltflächenklick anstelle 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 mit diesem Header eine Ajax-Anfrage erkennen jquery HTTP_X_REQUESTED_WITH für PHP setzen

PHP

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

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


        }
    });        
});
22
Shaiful Islam

Ich mochte diese Antwort von Superluminary und besonders die Art und Weise, wie er eingewickelt ist, ist eine Lösung in einer jQuery Plugin. Vielen Dank an superluminary für eine sehr nützliche Antwort. In meinem Fall wollte ich jedoch ein Plugin, mit dem ich den Erfolg und Fehler Eventhandler mittels Optionen, wenn das Plugin initialisiert wird.

Also hier ist, was ich mir ausgedacht 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 ermöglicht es mir sehr einfach HTML-Formulare auf der Seite zu "ajaxifizieren" und onsubmit , success und Fehlerbehandlungsroutinen zum Implementieren von Rückmeldungen zum Status des Formulars "Senden" an den Benutzer. 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
      }
 });

Beachten Sie, dass die Ereignishandler success und error dieselben Argumente wie Sie erhalten würde aus den entsprechenden Ereignissen der jQuery ajax -Methode erhalten.

13
BruceHill

Ich habe folgendes für mich:

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

wo

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 Beitrag zu 'url' einen Ajax in Form von {success: false, error:'my Error to display'} zurückgibt.

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

9
Tarion

jQuery AJAX submit form ist nichts anderes als ein Formular mit der Formular-ID zu senden, wenn Sie auf eine Schaltfläche klicken

Bitte folgen Sie den Schritten

Schritt 1 - Das Formular-Tag muss ein ID-Feld haben

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

Schaltfläche, auf die Sie klicken werden

<button>Save</button>

Schritt 2 - Das Ereignis submit befindet sich in jQuery, mit dessen Hilfe ein Formular gesendet werden kann. Im folgenden Code bereiten wir eine JSON-Anforderung aus dem Namen des HTML-Elements vor.

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

für eine Live-Demo klicken Sie auf den unten stehenden Link

Wie reiche ich ein Formular mit jQuery AJAX ein?

6

erwägen, closest zu verwenden

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

So vermeiden Sie das Senden mehrerer Formulardaten:

Vergessen Sie nicht, das Senden-Ereignis aufzuheben, bevor das Formular erneut gesendet wird. Der Benutzer kann die sumbit-Funktion mehr als einmal aufrufen, hat möglicherweise etwas vergessen oder war ein Validierungsfehler.

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

Wenn Sie form. Serialize () verwenden, müssen Sie jedem Formularelement einen Namen wie diesen geben:

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

Und das Formular wird folgendermaßen serialisiert:

firstName=Chris&lastName=Halcrow ...
4
Chris Halcrow

Sie können diese Funktion bei der Übermittlung wie unten verwenden.

HTML-Formular

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

jQuery-Funktion:

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

Weitere Details und Beispiele finden Sie unter: http://www.spiderscode.com/simple-ajax-contact-form/

4
suresh raj

Nur eine freundliche Erinnerung, dass data auch ein Objekt sein kann:

$('form#foo').submit(function () {
    $.ajax({
        url: 'http://foo.bar/some-ajax-script',
        type: 'POST',
        dataType: 'json',
        data: {
            'foo': 'some-foo',
            'bar': 'some-bar'
        }
    }).always(function (data) {
        console.log(data);
    });

    return false;
});
1

Dies ist nicht die Antwort auf die Frage von OP,
Wenn Sie jedoch das statische Formular DOM nicht verwenden können, können Sie dies auch versuchen.

var $form = $('<form/>').append(
    $('<input/>', {name: 'username'}).val('John Doe'),
    $('<input/>', {name: 'user_id'}).val('john.1234')
);

$.ajax({
    url: 'api/user/search',
    type: 'POST',
    contentType: 'application/x-www-form-urlencoded',
    data: $form.serialize(),
    success: function(data, textStatus, jqXHR) {
        console.info(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        var errorMessage = jqXHR.responseText;
        if (errorMessage.length > 0) {
            alert(errorMessage);
        }
    }
});
0
wonsuc