jQuery AJAX wyślij formularz

Jest to proste odniesienie:

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

Inne podobne rozwiązanie wykorzystujące atrybuty zdefiniowane na elemencie formularza:

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

Jest kilka rzeczy, o których musisz pamiętać.

1. Istnieje kilka sposobów na przesłanie formularza

• użycie przycisku submit
• naciskając enter
• poprzez wywołanie zdarzenia submit w JavaScript
• prawdopodobnie bardziej w zależności od urządzenia lub przyszłego urządzenia.

Powinniśmy zatem powiązać z formularz submit event , a nie z przyciskiem click event. Zapewni to, że nasz kod będzie działał na wszystkich urządzeniach i technologiach wspomagających teraz i w przyszłości.

2. Hijax

Użytkownik może nie mieć włączonej obsługi JavaScript. Wzór hijax jest dobry tutaj, gdzie delikatnie przejmujemy kontrolę nad formularzem za pomocą JavaScript, ale pozostawiamy go do poddania, jeśli JavaScript zawiedzie.

Powinniśmy wyciągnąć adres URL i metodę z formularza, więc jeśli HTML się zmieni, nie musimy aktualizować JavaScript.

3. Unobtrusive JavaScript

Za pomocą zdarzenia .preventDefault () zamiast return false jest dobrą praktyką, ponieważ pozwala zdarzeniu zrobić bańkę. Pozwala to powiązać Inne skrypty ze zdarzeniem, na przykład Skrypty analityczne, które mogą monitorować interakcje użytkowników.

Speed

Najlepiej użyć zewnętrznego skryptu,zamiast wstawiać nasz skrypt w linii. Możemy połączyć się z tym w sekcji head strony za pomocą znacznika skryptu lub link do niego na dole strony dla szybkości. Skrypt powinien po cichu poprawić wrażenia użytkownika, a nie dostać się do sposób.

Kod

Zakładając, że zgadzasz się ze wszystkimi powyższymi i chcesz złapać Zdarzenie submit i obsłużyć je poprzez AJAX( wzorzec hijax), możesz zrobić coś takiego:

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

Możesz ręcznie wyzwalać przesyłanie formularza w dowolnym momencie za pomocą JavaScript, używając czegoś takiego jak:

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

Edit:

Ostatnio musiałem to zrobić i skończyłem pisząc wtyczkę.

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

Dodaj atrybut data-autosubmit do znacznika formularza i możesz więc zrób to:

HTML

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

JS

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

Możesz również użyć FormData (ale niedostępne w 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)} 
});

W ten sposób używasz FormData.

Wersja prosta (nie wysyła obrazów)

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

Skopiuj i wklej ajaksyfikację formularza lub wszystkich formularzy na stronie

Jest to zmodyfikowana wersja Alfrekjv ' s odpowiedź

• będzie działać z jQuery >= 1.3.2
• możesz to uruchomić, zanim dokument będzie gotowy
• możesz usunąć i ponownie dodać formularz i nadal będzie działać
• zostanie wysłana do tego samego miejsca, co normalna forma, określona w formularz " działanie" atrybut

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

Chciałem edytować odpowiedź Alfrekjva, ale zbytnio odbiegłem od niej, więc postanowiłem opublikować to jako oddzielną odpowiedź.

Nie wysyła plików, nie obsługuje przycisków, na przykład kliknięcie przycisku (w tym przycisku Wyślij) wysyła jego wartość jako dane formularza, ale ponieważ jest to żądanie ajax, kliknięcie przycisku nie zostanie wysłane.

Aby Obsługiwać przyciski, możesz uchwycić rzeczywiste kliknięcie przycisku zamiast poddaj się.

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

Po stronie serwera możesz wykryć żądanie ajax z tym nagłówkiem, który ustawia jquery HTTP_X_REQUESTED_WITH for php

PHP

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

Ten kod działa nawet z wejściem pliku

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


        }
    });        
});

Bardzo mi się spodobała ta odpowiedź przez superluminary a szczególnie sposób, w jaki zawija się w jQuery plugin. Dzięki więc superluminary za bardzo przydatną odpowiedź. W moim przypadku chciałem jednak wtyczki, która pozwoliłaby mi zdefiniować procedury obsługi zdarzeń success i error za pomocą opcji, gdy wtyczka jest inicjalizowana.

Oto co wymyśliłem:

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

Ten plugin pozwala mi bardzo łatwo " ajaxify" formularze html na stronie i dostarczyć onsubmit, pomyślność i błąd Obsługa zdarzeń do implementacji informacji zwrotnej do użytkownika o statusie przesłanego formularza. To pozwoliło na użycie wtyczki w następujący sposób:

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

Zauważ, że procedury obsługi zdarzeńsuccess ierror otrzymują te same argumenty, które otrzymujesz od odpowiednich zdarzeń z jQuery metoda ajax .

Mam dla siebie:

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

Gdzie

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

To zakłada, że post do ' url ' zwraca ajax w postaci {success: false, error:'my Error to display'}

Rozważ użycie 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();
    });

JQuery AJAX wyślij formularz , jest niczym innym jak przesłać formularz za pomocą identyfikatora formularza po kliknięciu przycisku

Wykonaj kroki

Krok 1-znacznik formularza musi mieć pole ID

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

Przycisk, który chcesz kliknąć

<button>Save</button>

Krok 2 - submit zdarzenie jest w jQuery, które pomaga przesłać formularz. w poniższym kodzie przygotowujemy zapytanie JSON z elementu HTML name.

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

Aby zobaczyć demo na żywo Kliknij na poniższy link

Jak przesłać formularz za pomocą jQuery AJAX?

Aby uniknąć wielu formdata wysyła:

Nie zapomnij odłączyć zdarzenia submit przed ponownym wysłaniem formularza, Użytkownik może wywołać funkcję sumbit więcej niż jeden raz, może zapomniał czegoś, lub był błąd walidacji.

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

Jeśli używasz formularza .serialize () - musisz nadać każdemu elementowi formularza taką nazwę:

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

A formularz jest serializowany w następujący sposób:

firstName=Chris&lastName=Halcrow ...

Możesz użyć tego w funkcji submit, jak poniżej.

Formularz HTML

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

Funkcja JQuery:

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

Po Więcej SZCZEGÓŁÓW I przykładową wizytę: http://www.spiderscode.com/simple-ajax-contact-form/

Istnieje również zdarzenie submit, które może być wywołane w ten sposób $("#form_id").submit (). Możesz użyć tej metody, jeśli formularz jest już dobrze reprezentowany w HTML. Po prostu przeczytałeś na stronie, wypełniłeś dane wejściowe formularza, a następnie zadzwoniłeś .submit (). Użyje metody i akcji zdefiniowanych w deklaracji formularza, więc nie musisz jej kopiować do swojego javascript.

Przykłady