jQuery AJAX başvuru formu

Ben ad orderproductFormve tanımsız sayıda girdi içeren bir form var .

Bir tür jQuery.get veya ajax ya da böyle bir şey Ajax aracılığıyla bir sayfa çağırmak ve formun tüm girdileri birlikte göndermek istiyorum orderproductForm.

Sanırım bir yol böyle bir şey yapmak

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

Ancak tüm form girdilerini tam olarak bilmiyorum. TÜM form girdilerini gönderecek bir özellik, işlev ya da bir şey var mı?

Ajax Form Eklentisi'nden veya jQuery serileştirme işlevinden ajaxForm / ajaxSubmit işlevlerini kullanabilirsiniz .

AjaxForm :

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

veya

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

ajaxForm, gönder düğmesine basıldığında gönderilir. ajaxSubmit hemen gönderir.

Seri numarası :

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

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

AJAX serileştirme belgeleri burada .

Bu basit bir referanstır:

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


});

Umarım size yardımcı olur.

Form öğesinde tanımlanan öznitelikleri kullanan başka bir benzer çözüm:

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

Aklınızda bulundurmanız gereken birkaç şey var.

1. Form göndermenin birkaç yolu vardır

• gönder düğmesini kullanma
• enter tuşuna basarak
• JavaScript'te bir gönderme etkinliğini tetikleyerek
• muhtemelen cihaza veya gelecekteki cihaza bağlı olarak.

Bu nedenle düğme tıklama etkinliğine değil, form gönderme etkinliğine bağlanmalıyız . Bu, kodumuzun şimdi ve gelecekte tüm cihazlarda ve yardımcı teknolojilerde çalışmasını sağlayacaktır.

2. Hijax

Kullanıcının JavaScript'i etkinleştirmemiş olabilir. Bir hijax kalıbı burada iyidir, burada JavaScript kullanarak formun kontrolünü nazikçe kontrol ederiz, ancak JavaScript başarısız olursa gönderilebilir bırakın.

URL ve yöntemi formdan almalıyız, bu nedenle HTML değişirse JavaScript'i güncellememiz gerekmez.

3. Göze batmayan JavaScript

Return false yerine event.preventDefault () yöntemini kullanmak, etkinliğin patlamasına izin verdiği için iyi bir uygulamadır. Bu, diğer komut dosyalarının etkinliğe bağlanmasına olanak tanır; örneğin, kullanıcı etkileşimlerini izliyor olabilecek analitik komut dosyaları.

hız

İdeal olarak komut dosyamızı satır içine eklemek yerine harici bir komut dosyası kullanmalıyız. Buna bir komut dosyası etiketi kullanarak sayfanın baş bölümünde veya hız için sayfanın alt kısmına bağlantı verebiliriz. Komut dosyası, sessizce kullanıcı deneyimini geliştirmeli, engellememelidir.

kod

Yukarıdakilerin tümünü kabul ettiğinizi ve gönderme etkinliğini yakalamak ve AJAX (hijax kalıbı) ile işlemek istediğinizi varsayarsak, şöyle bir şey yapabilirsiniz:

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

Bir form gönderimini JavaScript aracılığıyla istediğiniz zaman manuel olarak tetikleyebilirsiniz:

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

Düzenle:

Son zamanlarda bunu yapmak zorunda kaldım ve bir eklenti yazdım.

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

Form etiketinize bir veri otomatik gönderme özelliği ekleyin; ardından bunu yapabilirsiniz:

HTML

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

JS

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

FormData'yı da kullanabilirsiniz (Ancak IE'de kullanılamaz):

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

FormData bu şekilde kullanılır .

Basit sürüm (resim göndermez)

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

Bir formun veya tüm formların bir sayfasındaki özetini kopyalayıp yapıştırma

Alfrekjv'in cevabının değiştirilmiş bir versiyonudur.

• JQuery> = 1.3.2 ile çalışacaktır
• Belge hazır olmadan önce bunu çalıştırabilirsiniz
• Formu kaldırabilir ve yeniden ekleyebilirsiniz, yine de çalışır
• Formun "action" özelliğinde belirtilen normal formla aynı konuma gönderilir

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

Alfrekjv'in cevabını düzenlemek istedim ama bundan çok fazla saptı, bu yüzden bunu ayrı bir cevap olarak göndermeye karar verdim.

Dosyaları göndermez, düğmeleri desteklemez, örneğin bir düğmeyi tıklatmak (bir gönderme düğmesi dahil) değerini form verileri olarak gönderir, ancak bu bir ajax isteği olduğundan düğme tıklaması gönderilmez.

Düğmeleri desteklemek için gönder yerine gerçek düğmeyi yakalayabilirsiniz.

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

Sunucu tarafında jquery php için ayarlar bu başlık ile bir ajax isteği tespit edebilirsinizHTTP_X_REQUESTED_WITH

PHP

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

Bu kod dosya girişi ile bile çalışır

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


        }
    });        
});

Ben gerçekten sevdim bu cevabı ile superluminary bir ve özellikle o sarılmış yoludur çözümü jQuery eklentisi. Bu yüzden çok yararlı bir cevap için süper lümenlere teşekkürler . Benim durumumda olsa da, eklenti başlatıldığında seçenekler aracılığıyla başarı ve hata olay işleyicileri tanımlamak için izin verecek bir eklenti istedim .

İşte benim ortaya koyduğum şey:

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

Bu eklenti, sayfadaki html formlarını kolayca "ajaxify" ve form gönderme durumunun kullanıcıya geri bildirim uygulamak için onubmit , başarı ve hata olay işleyicileri sağlamamı sağlar . Bu, eklentinin aşağıdaki gibi kullanılmasına izin verdi:

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

O Not başarı ve hata olay işleyicileri size karşılık gelen olaylardan alacağı aynı argümanları almak jQuery ajax yöntemiyle.

Benim için aşağıdakileri aldım:

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

nerede

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

Bu, 'url' yazısının, ajax değerini {success: false, error:'my Error to display'}

Bunu istediğiniz gibi değiştirebilirsiniz. Bu pasajı kullanmaktan çekinmeyin.

jQuery AJAX gönderme formu , bir düğmeyi tıklattığınızda form kimliğini kullanarak bir form göndermekten başka bir şey değildir

Lütfen adımları izleyin

1. Adım - Form etiketi bir kimlik alanına sahip olmalıdır

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

Tıklayacağınız düğme

<button>Save</button>

Adım 2 - Gönderme olayı, form göndermenize yardımcı olan jQuery'de. Aşağıdaki kodda HTML öğesi adından JSON isteği hazırlıyoruz .

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

canlı demo için aşağıdaki linke tıklayınız

JQuery AJAX kullanarak Form gönderme

kullanmayı düşün 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();
    });

Bunun jQueryilgili bir soru olduğunu biliyorum , ama şimdi JS ES6 ile günler çok daha kolay. Saf bir javascriptcevap olmadığından , bence API'yi javascriptkullanarak çok daha temiz olan basit bir saf çözüm ekleyebileceğimi düşündüm fetch(). Bu, ağ isteklerini gerçekleştirmenin modern bir yoludur. Sizin durumunuzda, zaten bir form öğeniz olduğundan, isteğimizi oluşturmak için bunu kullanabiliriz.

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

Birden çok form verilerinin gönderilmesini önlemek için:

Formu tekrar göndermeden önce, send olayını engellemeyi unutmayın, Kullanıcı sumbit işlevini birden fazla kez çağırabilir, belki bir şey unutmuş veya bir doğrulama hatasıdır.

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

Eğer kullanıyorsanız formu ) (.serialize - Böyle her form elemanını bir isim vermek gerekir:

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

Ve form şu şekilde serileştirilir:

firstName=Chris&lastName=Halcrow ...

Bunu aşağıdaki gibi gönderme işlevinde kullanabilirsiniz.

HTML Formu

<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 işlevi:

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

Daha fazla ayrıntı ve örnek için şu adresi ziyaret edin: http://www.spiderscode.com/simple-ajax-contact-form/

Bu OP'nin sorusunun cevabı değildir,
ancak statik DOM formunu kullanamıyorsanız, bunu da deneyebilirsiniz.

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

Deneyin

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

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

  console.log('We submit form asynchronously (AJAX)');
  e.preventDefault();
}

<form method="POST" action="myapi/send" onsubmit="send(event,this)" name="orderproductForm">
    <input hidden name="csrfToken" value="$0meh@$h">
    <input name="email" value="aa@bb.com">
    <input name="phone" value="123-456-666">
    <input type="submit">    
</form>

Look on Chrome Console > Network after/before 'submit'

Sadece bir datanesne olabilecek dostça bir hatırlatma :

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

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>

Bu $ ("# form_id") gibi tetiklenebilen bir gönderme etkinliği de var. Form zaten HTML'de iyi temsil ediliyorsa bu yöntemi kullanırsınız. Sayfayı okudunuz, form girişlerini bir şeylerle doldurup .submit () öğesini çağırdınız. Formun bildiriminde tanımlanan yöntemi ve eylemi kullanır, bu nedenle javascript'inize kopyalamanız gerekmez.

örnekler