jQuery AJAX mengirimkan formulir


939

Saya memiliki formulir dengan nama orderproductFormdan jumlah input yang tidak ditentukan.

Saya ingin melakukan semacam jQuery.get atau ajax atau sesuatu seperti itu yang akan memanggil halaman melalui Ajax, dan mengirimkan semua input formulir orderproductForm.

Saya kira satu cara adalah melakukan sesuatu seperti

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

Namun saya tidak tahu persis semua form input. Apakah ada fitur, fungsi atau sesuatu yang hanya akan mengirim SEMUA input formulir?

Jawaban:


814

Anda dapat menggunakan fungsi ajaxForm / ajaxSubmit dari Ajax Form Plugin atau fungsi serialisasi jQuery.

AjaxForm :

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

atau

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

ajaxForm akan mengirim ketika tombol kirim ditekan. ajaxSubmit mengirim segera.

Serialize :

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

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

Dokumentasi serialisasi AJAX ada di sini .


2
ide yang menarik, namun, saya tidak mengontrol sisi server yang saya panggil, oleh karena itu saya tidak dapat mengirimkannya data bersambung
Nathan H

25
Ya Anda bisa, namanya tidak penting apa yang akan dilakukannya adalah mengirim pasangan setiap kunci-formulir dan setiap variabel bentuk.

6
Ini serial ke string kueri, seperti data yang Anda masukkan ke dalam array secara manual dalam panggilan GET akan ada. Ini yang Anda inginkan, saya cukup yakin.
JAL

1
oooh saya mengerti, saya kemudian menambahkan string ini ke bagian akhir URL di dapatkan panggilan. Saya berpikir serialisasi PHP. Maaf. Terima kasih!
Nathan H

238
.ajaxSubmit()/ .ajaxForm()bukan fungsi inti jQuery - Anda memerlukan Plugin Form jQuery
Yarin

1401

Ini adalah referensi sederhana:

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


});

Saya harap ini membantu Anda.


46
Tetapi form.serialize () tidak dapat memposting <input type = "file"> di IE
macio.Jun

2
Jawaban bagus untuk pengiriman formulir normal!
The Sheek Geek

1
Mirip dengan @ BjørnBørresen, Anda juga dapat menggunakan type: $(this).attr('method')jika Anda menggunakan methodatribut pada formulir Anda.
djule5

2
Mungkin perlu disebutkan bahwa sejak jQuery 1.8, .success, .error, dan .complete tidak digunakan lagi karena .done, .fail, dan .always.
Adam

2
Komentar @ JohnKary - artikel yang bagus, sepertinya sudah tidak tersedia lagi. Berikut ini arsip acara jQuery: Stop (Mis) Menggunakan Return False
KyleMit

455

Solusi serupa lainnya menggunakan atribut yang didefinisikan pada elemen bentuk:

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

Adakah saran tentang cara melakukan ini jika atribut nama menyertakan "."? (Persyaratan sisi server, bukan ide saya).
Josef Engelfrost

Sertakan panggilan balik kesalahan ke ini untuk membuatnya selesai. Seseorang tidak pernah tahu kapan seseorang akan mendapatkan kesalahan, harus selalu memperhitungkannya.
Aaron-coding

1
Jika Anda tidak menetapkan metode atau tindakan, getmasing-masing default ke dan URL saat ini. Bisa dilakukan dengan menambahkan asumsi ini ke kode.
rybo111

1
Per dokumentasi jQuery ( api.jquery.com/submit ), frm.submit (fungsi (acara) {..}); setara dengan frm.on ("kirim", fungsi (acara) {..}) ;. Bagi saya yang terakhir lebih mudah dibaca karena jelas bahwa Anda melampirkan pengendali acara ke elemen yang akan dieksekusi ketika acara dipecat.
mehmet

177

Ada beberapa hal yang perlu Anda ingat.

1. Ada beberapa cara untuk mengirimkan formulir

  • menggunakan tombol kirim
  • dengan menekan enter
  • dengan memicu acara kirim dalam JavaScript
  • mungkin lebih tergantung pada perangkat atau perangkat masa depan.

Karena itu kita harus mengikat acara ajukan formulir , bukan acara klik tombol. Ini akan memastikan kode kami berfungsi pada semua perangkat dan teknologi bantu sekarang dan di masa depan.

2. Hijax

Pengguna mungkin tidak mengaktifkan JavaScript. Sebuah Hijax pola baik di sini, di mana kita lembut mengambil kendali dari bentuk menggunakan JavaScript, tapi biarkan submittable jika JavaScript gagal.

Kita harus menarik URL dan metode dari formulir, jadi jika HTML berubah, kita tidak perlu memperbarui JavaScript.

3. JavaScript yang tidak mengganggu

Menggunakan event.preventDefault () alih-alih mengembalikan false adalah praktik yang baik karena memungkinkan acara untuk muncul. Ini memungkinkan skrip lain mengikat ke dalam acara tersebut, misalnya skrip analitik yang mungkin memantau interaksi pengguna.

Kecepatan

Kita sebaiknya menggunakan skrip eksternal, daripada memasukkan skrip inline kami. Kami dapat menautkan ini di bagian kepala halaman menggunakan tag skrip, atau menautkannya di bagian bawah halaman untuk kecepatan. Script harus secara diam-diam meningkatkan pengalaman pengguna, tidak menghalangi.

Kode

Dengan asumsi Anda setuju dengan semua hal di atas, dan Anda ingin menangkap acara pengiriman, dan menanganinya melalui AJAX (pola hijax), Anda dapat melakukan sesuatu seperti ini:

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

Anda dapat secara manual memicu pengiriman formulir kapan pun Anda suka melalui JavaScript menggunakan sesuatu seperti:

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

Edit:

Baru-baru ini saya harus melakukan ini dan akhirnya menulis sebuah 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)

Tambahkan atribut data-autosubmit ke tag formulir Anda dan kemudian Anda bisa melakukan ini:

HTML

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

JS

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

2
bagaimana cara menambahkan callback ke fungsi 'selesai' dan 'gagal'? sesuatu seperti $ ('form [data-autosubmit]'). autosubmit (). done (function ({...}); Ini mungkin?
Crusader

1
Hai @Crusader - tentu saja, alih-alih meminta plugin ini mengembalikan ini, Anda bisa mengembalikannya ke acara ajax, lalu Anda dapat langsung menghubungkannya. Bergantian Anda bisa meminta plugin menerima panggilan balik sukses.
superluminary

Saya tidak melihat bagaimana hal ini ".. biarkan tetap terkirim jika JavaScript gagal" terjadi di sini?
mehmet

@mmatt - Jika JavaScript dinonaktifkan, formulir masih berupa formulir. Pengguna mengklik kirim dan pengiriman formulir berbasis browser biasa terjadi. Kami menyebut peningkatan progresif ini. Ini bukan masalah besar saat ini karena pembaca layar modern mendukung JavaScript.
superluminary

@mmatt - Callback janji secara opsional akan menerima parameter yang berisi data.
superluminary

41

Anda juga dapat menggunakan FormData (Tapi tidak tersedia di 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)} 
});

Ini adalah bagaimana Anda menggunakan FormData .


8
Saya melihat FormData sekarang didukung oleh IE10. Dalam beberapa tahun ini akan menjadi solusi yang disukai.
superluminary

3
Apa keuntungan dari cara ini?
lambang

1
@Inign keuntungannya adalah, tidak ada plugin apa pun yang diperlukan, dan berfungsi pada banyak browser modern.
KhoPhi

4
@insign FormData dapat menangani file juga (jika ada satu bidang seperti itu di formulir Anda) sedangkan serialize () mengabaikannya.
mehmet

UnEught TypeError: Gagal membuat 'FormData': parameter 1 bukan dari tipe 'HTMLFormElement'
rahim.nagori

28

Versi sederhana (tidak mengirim gambar)

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

Salin dan tempel ajaxifikasi formulir atau semua formulir pada halaman

Ini adalah versi modifikasi dari jawaban Alfrekjv

  • Ini akan bekerja dengan jQuery> = 1.3.2
  • Anda dapat menjalankan ini sebelum dokumen siap
  • Anda dapat menghapus dan menambahkan kembali formulir dan itu masih akan berfungsi
  • Ini akan memposting ke lokasi yang sama dengan bentuk normal, yang ditentukan dalam atribut "aksi" formulir

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

Saya ingin mengedit jawaban Alfrekjv tetapi terlalu menyimpang darinya sehingga memutuskan untuk memposting ini sebagai jawaban yang terpisah.

Tidak mengirim file, tidak mendukung tombol, misalnya mengklik tombol (termasuk tombol kirim) mengirimkan nilainya sebagai data formulir, tetapi karena ini adalah permintaan ajax klik tombol tidak akan dikirim.

Untuk mendukung tombol, Anda dapat menangkap klik tombol yang sebenarnya daripada mengirimkan.

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

Di sisi server Anda dapat mendeteksi permintaan ajax dengan header ini yang ditetapkan jquery HTTP_X_REQUESTED_WITH untuk php

PHP

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

Bagaimana cara kerjanya jika Anda TIDAK ingin mengirim file dengan formulir ini?
Yami Medina

1
@YamiMedina itu bukan solusi sederhana, Anda perlu mengirim seluruh permintaan dalam format yang berbeda (format multi-bagian) dengan data file
Timo Huovinen

22

Kode ini berfungsi bahkan dengan input 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)
        {


        }
    });        
});

3
Yang perlu diperhatikan formData () adalah IE10 + developer.mozilla.org/en-US/docs/Web/API/FormData
Chris Hopkins

1
the dataType: 'json' penting jika Anda ingin menggunakan form.serialize ()
David Morrow

wow, FormData ini luar biasa! dalam kasus seseorang perlu: Array.from(new FormData(form))iterates atas iterator formd ini :)
test30

13

Saya sangat menyukai jawaban ini oleh superluminary dan terutama cara dia membungkus adalah solusi dalam plugin jQuery . Jadi terima kasih kepada superluminary untuk jawaban yang sangat berguna. Dalam kasus saya, saya ingin plugin yang memungkinkan saya untuk menentukan keberhasilan dan kesalahan event handler melalui opsi ketika plugin diinisialisasi.

Jadi inilah yang saya pikirkan:

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

Plugin ini memungkinkan saya untuk dengan mudah "ajaxify" formulir html pada halaman dan memberikan onsubmit , penangan event sukses dan kesalahan untuk menerapkan umpan balik kepada pengguna dari status mengirimkan formulir. Ini memungkinkan plugin untuk digunakan sebagai berikut:

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

Perhatikan bahwa penangan event sukses dan kesalahan menerima argumen yang sama yang akan Anda terima dari peristiwa yang sesuai dari metode ajax jQuery .


9

Saya mendapatkan yang berikut untuk saya:

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

dimana

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

Ini mengasumsikan posting ke 'url' mengembalikan ajax dalam bentuk {success: false, error:'my Error to display'}

Anda dapat memvariasikan ini sesuai keinginan Anda. Jangan ragu untuk menggunakan cuplikan itu.


1
Untuk apa targetdisini? Mengapa Anda mengirim formulir dengan AJAX, hanya untuk mengalihkan ke halaman baru?
1252748

9

jQuery AJAX mengirimkan formulir , tidak lain adalah mengirimkan formulir menggunakan ID formulir ketika Anda mengklik tombol

Ikuti langkah-langkahnya

Langkah 1 - Tag formulir harus memiliki bidang ID

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

Tombol yang akan Anda klik

<button>Save</button>

Langkah 2 - ajukan acara ada di jQuery yang membantu mengirimkan formulir. dalam kode di bawah ini kami sedang mempersiapkan permintaan JSON dari nama elemen 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);
        }
    });
});

untuk demo langsung klik tautan di bawah ini

Bagaimana cara mengirimkan Formulir menggunakan jQuery AJAX?


5

pertimbangkan untuk menggunakan 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

Saya tahu ini adalah jQuerypertanyaan terkait, tetapi sekarang dengan JS ES6 hal-hal jauh lebih mudah. Karena tidak ada javascriptjawaban murni , saya pikir saya bisa menambahkan javascriptsolusi murni sederhana untuk ini, yang menurut saya jauh lebih bersih, dengan menggunakan fetch()API. Ini cara modern untuk mengimplementasikan permintaan jaringan. Dalam kasus Anda, karena Anda sudah memiliki elemen formulir, kami cukup menggunakannya untuk membangun permintaan kami.

const form = document.forms["orderproductForm"];
const formInputs = form.getElementsByTagName("input"); 
let formData = new FormData(); 
for (let input of formInputs) {
    formData.append(input.name, input.value); 
}

fetch(form.action,
    {
        method: form.method,
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error.message))
    .finally(() => console.log("Done"));

4

Untuk menghindari beberapa formdata mengirim:

Jangan lupa batalkan ajukan acara, sebelum formulir dikirimkan lagi, Pengguna dapat memanggil fungsi sumbit lebih dari satu kali, mungkin ia lupa sesuatu, atau kesalahan validasi.

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

4

Jika Anda menggunakan form .serialize () - Anda perlu memberi setiap elemen form nama seperti ini:

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

Dan formulir akan serial seperti ini:

firstName=Chris&lastName=Halcrow ...

4

Anda dapat menggunakan ini pada fungsi kirim seperti di bawah ini.

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

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

Untuk detail lebih lanjut dan contoh Kunjungi: http://www.spiderscode.com/simple-ajax-contact-form/


2

Ini bukan jawaban untuk pertanyaan OP,
tetapi jika Anda tidak dapat menggunakan DOM bentuk statis, Anda juga dapat mencoba seperti ini.

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

2

Mencoba

fetch(form.action,{method:'post', body: new FormData(form)});


1

Hanya pengingat ramah yang databisa menjadi objek juga:

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

JavaScript

(function ($) {
    var form= $('#add-form'),
      input = $('#exampleFormControlTextarea1');


   form.submit(function(event) {

       event.preventDefault(); 

       var req = $.ajax({
           url: form.attr('action'),
           type: 'POST',
           data: form.serialize()
       });
    req.done(function(data) {
       if (data === 'success') {
           var li = $('<li class="list-group-item">'+ input.val() +'</li>');
            li.hide()
                .appendTo('.list-group')
                .fadeIn();
            $('input[type="text"],textarea').val('');
        }
   });
});


}(jQuery));

HTML

    <ul class="list-group col-sm-6 float-left">
            <?php
            foreach ($data as $item) {
                echo '<li class="list-group-item">'.$item.'</li>';
            }
            ?>
        </ul>

        <form id="add-form" class="col-sm-6 float-right" action="_inc/add-new.php" method="post">
            <p class="form-group">
                <textarea class="form-control" name="message" id="exampleFormControlTextarea1" rows="3" placeholder="Is there something new?"></textarea>
            </p>
            <button type="submit" class="btn btn-danger">Add new item</button>
        </form>

-21

Ada juga acara kirim, yang dapat dipicu seperti $ ini ("# form_id") .mohon (). Anda akan menggunakan metode ini jika form sudah terwakili dengan baik dalam HTML. Anda baru saja membaca di halaman, mengisi input formulir dengan hal-hal, lalu panggil .submit (). Ini akan menggunakan metode dan tindakan yang didefinisikan dalam deklarasi formulir, jadi Anda tidak perlu menyalinnya ke javascript Anda.

contoh


58
jika Anda menghapus posting Anda, Anda mendapatkan poin penalti yang telah diambil dari Anda kembali.
sparkyspider

2
Ini akan mengirimkan formulir, tetapi tidak melalui AJAX, jadi tidak menjawab pertanyaan.
superluminary

11
apa yang dikatakan @spider, plus Anda mendapatkan lencana yang bagus yang disebut "tekanan teman sebaya"
nurettin
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.