Popo wikiristan jQuery. Yeni ve mevcut öğeleri ekleme

Bu makalede, jQuery aracılığıyla sunucuya ajax isteklerini zorlamak için kullandığım kod kullanılıyor. İşlevleri farklı olabilir, dolayısıyla kod yazmayı kolaylaştırmak için farklı işlevleri kullanabilirsiniz.

Bu, html verilerini ayıklayıp id = "result" ile bir dom öğesine yerleştirerek jQuery aracılığıyla yapılan en basit ajax isteğidir (bunun yerine öğe değiştirilir):

$("#result").load("");

Vikoristan yükünün daha gelişmiş versiyonu:

$("#result").load("", (par1:val1, par2:val2, ...), function(response, status, xhr) ( if (status == "success") ( warning("Bitti ) "); ) else (alert("Arrear: " + xhr.status + " " + xhr.statusText); ) )));

Hangi uygulama için sunucuya da parametreler iletilir ve bağlantı kesildikten sonra herhangi bir iptal olup olmadığı kontrol edilir (örneğin sunucudan gelen bağlantının reddedilmediği) ve diğer işlemler sonlandırılır.

Bu işlevler, http get ve post yöntemlerini kullanarak ajax dağıtımı yoluyla çalışır. Vikoristan'larından birkaçını göstereceğim.

$.get("", // adresleri gönder (par1:val1, par2:val2, ...), // bazı verilerin aktarımı fonksiyonu(veri) ( // sunucu verilerinden alınan verilerle bazı eylemler ));

Veri aktarımının yanı sıra sunucuyla bağlantı kesildikten sonra yapılan eylemlerin onaylanması da zorunludur. Bu durumda gerekirse 3 ve 4-6. satırlar silinerek kod kısaltılabilir.

Veri sunucusundaki içeriklerin türü dataType (bölüm aşağıda) eklenerek belirtilebilir - değerler otomatik olarak atanır.

Wiki gönderisi benzerdir ancak mevcut uygulamada wiki işlevi, sunucuyla bağlantı kesildikten sonra etkinleştirilir.

$.post("", (par1:val1, par2:val2, ...), onSuccess); function onSuccess(data) ( // sunucu veri verilerinden alınan tüm eylemler)

Aslında get ve post fonksiyonları aşağıda göreceğim gibi ajax fonksiyonunun kısaltılmış versiyonlarıdır.

getJSON - GET yöntemini kullanan ve json görünümünden veri çıkaran ajax isteğinin kısaltılmış versiyonu. Bu yöntem, örneğin verilerden herhangi bir veriyi kaldırmak ve onunla daha fazla çalışmak için kullanışlıdır.

$.getJSON("", (par1:val1, par2:val2, ...))success(function(data) ( // verilerle çalışalım, örneğin veriler üzerinde döngü yapıp yazdıralım: for (var i= 0; i 10, "metin" => "test satırı 1"); " => 30, "metin" => "test satırı 3"); echo json_encode($arr);

Böylece stdClass nesnelerini sunucudan kolayca aktarabilir ve bunları bir json satırına dönüştürebilirsiniz.

Şimdi basit bir get fonksiyonu kullanacağım, ajax fonksiyonunu kullanacağım ve html verilerini çıkaracağım.

$.ajax(( url: "", dataType: "html", başarı: function(data) ( // kaldırılan veri verileriyle ilgili her şey ));

Sunucuya istek get yöntemi kullanılarak yapılır, çünkü parametre, istek türüne benzer şekilde, eski GET'in arkasına yazın.

Windows uygulaması, verileri post yöntemini kullanarak aktarıp işleyerek ajax işleviyle donatılmıştır. Aşağıda en sık kullanılan ek parametreleri açıklayacağım.

$.ajax(( url: "", type: "post", data: "", // bir satırda olabilir veya örneğin şöyle olabilir: $("input, input:checked, input:checked, select, textarea) " ) dataType: "json", beforeSend: function() ( $("#sendajax").button("loading"); ),complete: function() ( $("#sendajax").button ("reset" ) ; ), başarı: function(json) ( // atılan verideki sorun ne), error: function(xhr, ajaxOptions, throwError) ( warning(thrownError + "\r\n" + xhr.statusText + "\r \ n" + xhr.responseText ) ));

Verileri geçersiz kılma düğmesi:

Göndermek

Fareyle üzerine gelinen uygulamada, butona bastığınızda butonun durumu hemen değişir (üzerindeki yazı “Gönderiliyor...” olarak değişir ve pasif hale gelir), dolayısıyla ek bir beforeSend parametresi kullanmanız gerekir. Daha sonra görev gerekli verileri aktarmaktır. Sunucuyla bağlantı kesildikten sonra butonun konumu öne doğru çevrilir (metin “Gönder” olarak değişir ve aktif hale gelir). Lütfen json verileri biçiminde çıkın.

Çoğu zaman yararlı olabilecek bir ajax isteği göndermek için parametreleri kısaca açıklayacağım:

Aşağıda vikoristan ajax istekleri için bir takım uygulamalara değineceğim.

Zrazkovy html-form kodu:

Adınız:

JavaScript kodu:

$("#myform").submit(function(e) ( e.preventDefault(); $.ajax(( type: $(this).attr("method")), url: "", data: $( this) ).serialize(), async: false, dataType: "html", başarı: function(result)( warning("Form gönderildi"); ) ));

“Gönder” butonuna tıkladığınızda sayfanın yeniden etkinleştirilmesini önlemek için öncelikle standart tarayıcı ayarlarını ve e.preventDefaults() yöntemini kullanın.

Veri parametresinde tüm form alanlarını iletiyoruz, vikorista $(this).serialize() - bu işlev tüm girdileri dönüştürür ve sunucuya gönderilmeye uygun bir satıra seçim yapar.

async: false parametresi de burada değiştirildi, böylece form sunucuya gönderilene kadar başka hiçbir şey girilemez veya oluşturulamaz.

Sayfayı yeniden korumadan bir dosyayı veya görüntüyü sunucuya zorlamak sıklıkla çöker. Bu uygulama için iki özelliğe bakacağım: İstenildiği gibi formatlanabilen düğmeye tıklayarak bir dosya seçmek ve dosyayı bir Ajax isteği kullanarak sunucuya aktarırken ilerlemeyi görüntülemek.

Html kodu şu şekilde olacaktır:

Görüntüleri büyüleyin

#addfile ( konum: göreceli; taşma: gizli; genişlik: 180 piksel; yükseklik: 34 piksel; ) #load_file ( konum: mutlak; üst: 0; sol: 0; genişlik: 180 piksel; yükseklik: 34 piksel; yazı tipi boyutu: 0 piksel; : 0; filtre: alfa(opaklık:0); #load_file:hover (imleç: işaretçi;

Fikrin özü, düğmenin üstünde bir dosya seçmek için standart bir girişin görüntülenmesi, ancak yüzeyde bir açıklık olması ve düğmeyle aynı boyutlara sahip olmasıdır. Bu şekilde bir düğme oluşturursunuz ve imleci onun üzerine getirdiğinizde aslında girişi işaret etmiş olursunuz. Görünüşe göre düğmeye bastığınızda aslında dosya seçim girişine basıyorsunuz. Bir dosyayı seçtikten sonra imlecin bulanıklaşmasını önlemek için görev yazı tipi boyutunu 0 piksel olarak ayarlayın.

Şimdi dosyayı ilerleme durumuyla birlikte sunucuya göndermek için kullanılan javascript kodu:

$(function() ( $("#load_file").on("change", loadfile); )); function loadfile() ( $("#addfile span").html("%0 çekildi"); dosyalar = $("#load_file").files; var form = new FormData(); , files); $.ajax(( url: "", type: "POST", veri: form, önbellek: false, süreç (); if (myXhr.upload) ( myXhr.upload.addEventListener("ilerleme",ShowProgress, false); ) return myXhr; ), tamamlandı: function(data)( $("#addfile span").html("Resmi yükle"); $("#load_file").val(""); ), başarı: function( mesaj)( uyarı(mesaj); ), hata: function(jqXHR, textStatus, errorThrown) ( alarm(textStatus+" "+errorThrown); ) )); ) function ShowProgress(e) ( if(e.lengthComputable)( $("#addfile span").html("Loaded by "+Math.round(100*e.loaded/e. total)+"%") ;

Sunucuya bir dosya yüklendiğinde, düğme halihazırda sunucuya %kaçının aktarıldığını gösterecektir. Özelleştirme tamamlandığında, düğme adı bir düğme gibi döndürülür ve yeni bir dosyanın seçilebilmesi için dosyayla birlikte giriş değeri boş olarak ayarlanır.

PHP'deki bir sunucu parçası örneği (Evgena'ya göre):

$mesaj = "";

if (empty($_FILES["upload"]["name"]) || $_FILES["upload"] == "none") ( $message = "Bir dosya seçmediniz"; ) else if ($ _FILES[ "upload"]["size"] == 0 || $_FILES["upload"]["size"] > 9437184) ( $message = "Dosya boyutu standartları karşılamıyor (maksimum 9 MB)" ; ($_FILES["yükleme"]["tür"] != "görüntü/jpeg") && ($_FILES["yükleme"]["tür"] != "görüntü/pjpeg") && ($_FILES[" upload "][" type"] != "image/gif") && ($_FILES["upload"]["type"] != "image/png")) ( $message = "Yalnızca JPG, GIF ve PNG resimlere izin veriliyor." ; ) else if (!is_uploaded_file($_FILES["upload"]["tmp_name"]))) ( $message = "Bir şeyler ters gitti. Dosyayı tekrar yüklemeyi deneyin."; ) else ( $ ftype = $_FILES[ "upload"]["type"]; $fname = "yeniisim_resim.".($ftype == "resim/gif" ? "gif" : ($ftype == "resim/png" ? " png " : "jpg ")); if (move_uploaded_file($_FILES["upload"]["tmp_name"], $_SERVER["DOCUMENT_ROOT"].."/files/".$fname)) ( $message = "The resim başarıyla yüklendi."; ) else ( $message = "Bir şeyler ters gitti. Dosyaya tekrar erişmeyi deneyin."; )) ) çıkış($mesaj);

Resimlerin yüklenmesiyle ilgili bilgiler $_FILES["upload"] dosyasında bulunur, çünkü Betik dosyayı şu şekilde ekledi: form.append("upload", files);

Görünüşe göre, PHP programlarında ihtiyacınız olan her şey, dosyanın aradığınız parametrelerle eşleştiğini kontrol etmek, dosyayı gerekli klasöre (uygulamada, dosyalar klasörüne) gerekli adlar altında (uygulamada, yeniisim_görüntü) taşımaktır. ve Tarayıcıya dönün, benimkideki uygulamaların nasıl olduğunu onaylayın, uyarı (mesaj) komutunu kullanarak basitçe görüntülenir;

Ajax isteklerini kullanmanın mümkün ve gerekli olduğu pek çok durum vardır ve bunların hepsi burada tartışılamaz. Burada uygulanabilecek önerilerin yanı sıra protestoları da yorumlara yazın.

AJAX, web geliştiricileri tarafından etkileşimli uygulamalar oluşturmak için kullanılan bir teknolojiler grubudur. AJAX, sayfayı yeniden yüklemeden sunucudan veri aktarmanıza olanak tanır. Bu şekilde düşmanca sonuçlar bile ortadan kaldırılabilir. Ve jQuery kütüphanesi, ek yöntemler kullanarak AJAX'ın uygulanmasını önemli ölçüde basitleştirir.

Teknolojiyi uygulamak için $.ajax veya jQuery.ajax yöntemi kullanılır:

$.ajax(güç) veya $.ajax(url [, güç])

JQuery'nin 1.5 sürümüne başka bir parametre eklendi.

url - istenen sayfanın adresleri;

özellikler – güç istenir.

başarı (işlev) - bu işlev, isteğin başarıyla tamamlanmasından sonra çağrılır. Fonksiyon 1'den 3'e kadar parametre seçer (kütüphane sürümüne bağlı olarak). İlk seçenek, sunucudan döndürülen verileri her zaman kaldırmaktır.

veri (nesne/satır) - talep edilen sayfaya iletilen müşteriden gelen veriler.

dataType (satır) - olası değerler: xml, json, script veya html. Sunucu çıktısında bulunan veri türünün açıklaması.

tür (satır) – giriş türü. Olası değerler: GET veya POST. Tipik olarak: AL.

url (satır) – isteğin URL adresleri.

Metne kolay aktarım.

$.ajax(( url: "response.php?action=sample1", başarı: function(data) ( $(".results").html(data); ) ));

Bir video için bir div öğesi vardır.

Yayınları kontrol ediyoruz

Sunucu yalnızca satırı döndürür:

Echo "Butt 1 - transfer başarıyla tamamlandı";

Verileri PHP betiğine aktarıyoruz.

$.ajax(( type: "POST", url: "response.php?action=sample2", data: "name=Andrew&nickname=Aramis", başarı: function(data)( $(".results").html( ) veri);

Sunucu önceden eklenen verilerin satırını döndürür:

Echo "Butt 2 - aktarım başarıyla tamamlandı. Parametreler: name=". $_POST["isim"] . ", takma ad = ". $_POST["takma ad"];

JavaScript Koduna Geçmek

$.ajax(( dataType: "script", url: "response.php?action=sample3", ))

Sunucu kodu yazar:

Echo "$(".results").html("Örnek 3 - Wikonanny JavaScript");";

Vikoristovuyemo XML. Örnek, RSS beslemesi gibi harici XML ile çalışmak için kullanılabilir.

$.ajax(( dataType: "xml", url: "response.php?action=sample4", başarı: function(xmldata)( $(".results").html()); $(xmldata).find ( "item").each(function())( $(" ").html($(this).text()).appendTo(".results"); ));

Sunucu XML kodunu döndürmekten suçlu:

Header("Content-Type: application/xml; karakter kümesi=UTF-8");