JQuery ajax form submit örnekleri

HTML formunu göndermenin çeşitli yöntemleri vardır. Biz sadece JQuery ile gönderme yöntemleri ile ilgili örnek yapacağız. 

Şimdi örnek bir form yapalım. 

<form action="save/sayfa" method="post" id="my_form">
    <label>Name</label>
    <input type="text" name="name" />
    <label>Email</label>
    <input type="email" name="email" />
    <label>Website</label>
    <input type="url" name="website" />
    <input type="submit" name="submit" value="Submit Form" />
<div id="server-results"><!-- Sonucun yazılacağı alan--></div>
</form>

Şimdi form submit olduğunda çalıştırılacak jquery kodumuzu yazalım.

// Ajax ile örnek

$("#my_form").submit(function(event){
	event.preventDefault(); //burada tıklanınca post işlemi yapmasın diye önlem alıyoruz
	var post_url = $(this).attr("action"); //formun urlsi alınıyor
	var request_method = $(this).attr("method"); //formun metodu alınıyor
	var form_data = $(this).serialize(); //formun datası alınıyor
	
	$.ajax({
		url : post_url,
		type: request_method,
		data : form_data
	}).done(function(response){ //
		$("#server-results").html(response);
	});
});

GET/ POST/ JSON örneklerini de yazalım:

// POST
$("#my_form").submit(function(event){
	event.preventDefault();  
	var post_url = $(this).attr("action");  
	var form_data = $(this).serialize();  
	
	$.post( post_url, form_data, function( response ) {
	  $("#server-results").html( response );
	});
});

// GET
$("#my_form").submit(function(event){
	event.preventDefault(); 
	var post_url = $(this).attr("action");  
	var form_data = $(this).serialize();  
	
	$.get( post_url, form_data, function( response ) {
	  $("#server-results").html( response );
	});
});

// JSON
$("#my_form").submit(function(event){
	event.preventDefault(); 
	var post_url = $(this).attr("action");  
	var form_data = $(this).serialize();  
	
	$.getJSON( post_url , form_data,function( response ) {
		//iterate json response
		$.each( response, function(key, val) {
			$("#server-results").append( val + "<br />"); //gelen sonucu ekler
		});
	});
});

Şimdi en çok zorlanılan bölüm multipart / form-data yani formdan dosya göndermeyi nasıl yaptığımızı yazalım.

<form action="gonderilecek/sayfa" method="post" id="my_form" enctype="multipart/form-data">
    <label>Name</label>
    <input type="text" name="name" />
    <label>Email</label>
    <input type="email" name="email" />
    <label>Website</label>
    <input type="url" name="website" />
    <input type="file" name="my_file[]" /> <!-- dosya ekleme inputu -->
    <input type="submit" name="submit" value="GÖnder" />
<div id="server-results"><!-- gelen sonuç --></div>
</form>

JQuery ile gönderilme şeklini görelim:

$("#my_form").submit(function(event){
    event.preventDefault();  
    var post_url = $(this).attr("action");  
    var request_method = $(this).attr("method");  
	var form_data = new FormData(this);  
    $.ajax({
        url : post_url,
        type: request_method,
        data : form_data,
		contentType: false,
		cache: false,
		processData:false
    }).done(function(response){ //sonucun geleceği alan
        $("#server-results").html(response);
    });
});

JQuery Ajax kullanarak dosya yüklemek için ihtiyacımız olan tüm kod budur. ContentType ayarlandığında false olmalıdır. Yoksa varsayılan ayarlanır "application / x-www-form-urlencoded" o ayarı, yükleme dosyaları için iyi değil yanlış olarak verileri yayınlayacağız "multipart / form-data" . Burada önemli olan bir diğer şey de, aynı zamanda false olarak ayarlanması gereken processData'dır , aksi takdirde jQuery, FormData nesnesini sorgu dizesine serileştirmeye çalışır ve bir Illegal invocation hatasıyla karşılaşabilirsiniz.

Bir de Progressbar ile örnek yapalım.

<form action="path/to/server/script" method="post" id="my_form">
    <label>Name</label>
    <input type="text" name="name" />
    <label>Email</label>
    <input type="email" name="email" />
    <label>Website</label>
    <input type="url" name="website" />
    <input type="file" name="my_file[]" /> <!-- dosya yükleme inputu -->
    <input type="submit" name="submit" value="Gönder" />
<div id="server-results"><!-- sonuç alanı --></div>
</form>
<div id="upload-progress"><div class="progress-bar"></div></div> <!-- Progress bar yükleniyor -->

Jquery örneği:

$("#my_form").submit(function(event){
    event.preventDefault();  
    var post_url = $(this).attr("action");  
    var request_method = $(this).attr("method");  
    var form_data = new FormData(this);  
    
    $.ajax({
        url : post_url,
        type: request_method,
        data : form_data,
		contentType: false,
		processData:false,
		xhr: function(){
		//upload Progress
		var xhr = $.ajaxSettings.xhr();
		if (xhr.upload) {
			xhr.upload.addEventListener('progress', function(event) {
				var percent = 0;
				var position = event.loaded || event.position;
				var total = event.total;
				if (event.lengthComputable) {
					percent = Math.ceil(position / total * 100);
				}
				//progressbar yükle
				$("#upload-progress .progress-bar").css("width", + percent +"%");
			}, true);
		}
		return xhr;
	}
    }).done(function(response){ // sonucu yaz
        $("#server-results").html(response);
    });
});

Örnek css kodu:

/*Progress Bar*/
#upload-progress{
    height: 20px;
    border: 1px solid #ddd;
    width: 100%;
}
#upload-progress .progress-bar{
	background: #bde1ff;
    width: 0;
    height: 20px;
}

İşe yarayan kodlarda buluşmak dileği ile. 

Bu makale https://www.sanwebe.com/2016/07/ajax-form-submit-examples-using-jquery adresinden alınmıştır.