Pertanyaan jQuery AJAX mengirimkan formulir


Saya memiliki formulir dengan nama orderproductForm dan sejumlah input yang tidak ditentukan.

Saya ingin melakukan beberapa jenis jQuery.get atau ajax atau apa pun seperti itu yang akan memanggil halaman melalui Ajax, dan mengirimkan semua masukan dari formulir orderproductForm.

Saya kira salah satu cara adalah melakukan sesuatu seperti itu

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

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


738
2017-12-25 01:31


asal


Jawaban:


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 submit ditekan. ajaxSubmit segera mengirim.

Serialisasi:

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

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

Dokumentasi serialisasi AJAX ada di sini.


687
2017-12-25 01:36



Ini adalah referensi sederhana:

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

Saya harap ini membantu Anda.


1089
2017-08-05 17:57



Solusi serupa lainnya menggunakan atribut yang didefinisikan pada elemen formulir:

<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



Ada beberapa hal yang perlu Anda ingat.

1. Ada beberapa cara untuk mengirimkan formulir

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

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

2. Hijax

Pengguna mungkin tidak mengaktifkan JavaScript. SEBUAH hijax pola baik di sini, di mana kami dengan lembut mengambil alih formulir menggunakan JavaScript, tetapi membiarkannya terisi jika JavaScript gagal.

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

3. JavaScript tidak obyektif

Menggunakan event.preventDefault () dari pada kembali salah adalah praktik yang baik karena memungkinkan acara untuk meluap. Ini memungkinkan skrip lain terkait ke dalam acara, misalnya skrip analitik yang mungkin memantau interaksi pengguna.

Kecepatan

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

Kode

Dengan asumsi Anda setuju dengan semua hal di atas, dan Anda ingin menangkap peristiwa kirim, dan menanganinya melalui AJAX (pola hijax), Anda bisa 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 mau melalui JavaScript menggunakan sesuatu seperti:

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

Edit:

Saya baru-baru ini 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 Anda kemudian dapat melakukan ini:

HTML

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

JS

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

162
2018-01-19 18:52



Anda juga bisa menggunakan FormData (Tetapi 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)} 
});

Beginilah cara Anda menggunakannya FormData.


26
2017-07-10 09:35



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 ajaxification formulir atau semua formulir pada halaman

Ini adalah versi modifikasi dari Alfrekjv menjawab

  • Ini akan bekerja dengan jQuery> = 1.3.2
  • Anda dapat menjalankan ini sebelum dokumen siap
  • Anda dapat menghapus dan menambahkan kembali formulir dan itu akan tetap berfungsi
  • Ini akan memposting ke lokasi yang sama dengan bentuk normal, yang ditentukan dalam atribut "tindakan" 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 menyimpang terlalu banyak sehingga memutuskan untuk memposting ini sebagai jawaban terpisah.

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

Untuk mendukung tombol, Anda dapat menangkap klik tombol yang sebenarnya, bukan pengiriman.

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 bisa mendeteksi permintaan ajax dengan header ini yang set jquery HTTP_X_REQUESTED_WITH untuk php

PHP

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

24
2018-02-07 19:35



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


        }
    });        
});

20
2017-11-12 23:06



saya sangat suka jawaban ini oleh superluminer dan terutama cara dia membungkus adalah solusi dalam jQuery plugin. Terima kasih untuk superluminer untuk jawaban yang sangat berguna. Dalam kasus saya, saya ingin plugin yang memungkinkan saya untuk mendefinisikan keberhasilan dan kesalahan penangan event dengan cara opsi ketika plugin diinisialisasi.

Jadi inilah yang saya temukan:

;(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" bentuk html pada halaman dan menyediakan pengiriman, keberhasilan dan kesalahan penangan acara untuk mengimplementasikan umpan balik kepada pengguna dari status pengiriman 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 keberhasilan dan kesalahan penangan event menerima argumen yang sama yang akan Anda terima dari peristiwa yang terkait jQuery  ajax metode.


11
2018-01-21 20:47