Tüm formu jQuery Ajax işlevinde veri olarak iletme

Bir jQuery ajax işlevi var ve yazı formu olarak tüm bir form göndermek istiyorum. Formu sürekli güncelliyoruz, böylece istekte gönderilmesi gereken form girdilerini sürekli güncellemek sıkıcı hale geliyor.

Tam olarak bunu yapan bir işlev var:

http://api.jquery.com/serialize/

var data = $('form').serialize();
$.post('url', data);

post yöntemi ile bir form göndermek istiyorsanız serialize () iyi bir fikir değildir. Örneğin, bir dosyayı ajax üzerinden geçirmek istiyorsanız, çalışmaz.

Şu kimliğe sahip bir formumuz olduğunu varsayın: "myform".

daha iyi bir çözüm bir FormData yapmak ve göndermek için:

    var myform = document.getElementById("myform");
    var fd = new FormData(myform );
    $.ajax({
        url: "example.php",
        data: fd,
        cache: false,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function (dataofconfirm) {
            // do something with the result
        }
    });

serialize()Form öğesinde genel kullanım .

Aynı anahtar altında birden fazla <select> seçeneğinin serileştirildiğini lütfen unutmayın.

<select id="foo" name="foo" multiple="multiple">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</select>

aynı sorgu parametresinin birden çok oluşumunu içeren bir sorgu dizesiyle sonuçlanır:

[path]?foo=1&foo=2&foo=3&someotherparams...

arka uçta istediğiniz şey olmayabilir.

Virgülle ayrılmış tek bir anahtara birden çok parametre azaltmak için bu JS kodunu (John Resig'in yerinde bir yorumcunun yanıtından utanmadan kopyalandı):

function compress(data) {
    data = data.replace(/([^&=]+=)([^&]*)(.*?)&\1([^&]*)/g, "$1$2,$4$3");
    return /([^&=]+=).*?&\1/.test(data) ? compress(data) : data;
}

yukarıdakine dönüşen:

[path]?foo=1,2,3&someotherparams...

JS kodunuzda şu şekilde adlandırırsınız:

var inputs = compress($("#your-form").serialize());

Umarım yardımcı olur.

kullanım

serialize ()

var str = $("form").serialize();

Ajax isteğinde bir sunucuya gönderilebilecek bir formu sorgu dizesine seri hale getirin.

Bunu yapmak için iyi bir jQuery seçeneği FormData üzerinden olduğunu . Bu yöntem, bir form aracılığıyla dosya gönderirken de uygundur!

<form id='test' method='post' enctype='multipart/form-data'>
   <input type='text' name='testinput' id='testinput'>
   <button type='submit'>submit</button>
</form>

JQuery'deki gönderme işleviniz şöyle görünecektir:

$( 'form#test' ).submit( function(){
   var data = new FormData( $( 'form#test' )[ 0 ] );

   $.ajax( {
      processData: false,
      contentType: false,

      data: data,
      dataType: 'json',
      type: $( this ).attr( 'method' );
      url: 'yourapi.php',
      success: function( feedback ){
         console.log( "the feedback from your API: " + feedback );
      }
});

formunuza veri eklemek için formunuzda gizli bir girdi kullanabilir veya anında ekleyebilirsiniz:

var data = new FormData( $( 'form#test' )[ 0 ] );
data.append( 'command', 'value_for_command' );

Sadece verileri göndermelisiniz. ve jquery ajax işlev kümesi parametrelerini kullanma. İşte bir örnek.

<script>
        $(function () {

            $('form').on('submit', function (e) {

                e.preventDefault();

                $.ajax({
                    type: 'post',
                    url: 'your_complete url',
                    data: $('form').serialize(),
                    success: function (response) {
                        //$('form')[0].reset();
                       // $("#feedback").text(response);
                        if(response=="True") {
                            $('form')[0].reset();
                            $("#feedback").text("Your information has been stored.");
                        }
                        else
                            $("#feedback").text(" Some Error has occured Errror !!! ID duplicate");
                    }
                });

            });

        });
    </script>

Diğer çözümler benim için işe yaramadı. Belki üzerinde çalıştığım projedeki eski DOCTYPE HTML5 seçeneklerini engelliyor.

Çözümüm:

<form id="form_1" action="result.php" method="post"
 onsubmit="sendForm(this.id);return false">
    <input type="hidden" name="something" value="1">
</form>

js:

function sendForm(form_id){
    var form = $('#'+form_id);
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: $(form).serialize(),
        success: function(result) {
            console.log(result)
        }
    });
}