jQuery ajax - load() fangfa
shili
shi yong AJAX qingqiu lai gai bian div yuansu de wenben:
$("button").click(function(){
$("div").load('demo_ajax_load.txt');
});
dingyi he yongfa
load() fangfa tongguo AJAX qingqiu congzhi fuwuqi jiazai shuju, bing ba fanhui de shuju fuzhao zhi zidingyi de yuansu zhong.
Açıklama:cunzai yige mingwei load de jQuery shijianfangfa. diaoqian zhege, zhiyuan canju.
yufa
load(url,data,function(response,status,xhr))
| canju | tanmi |
|---|---|
| url | İstek gönderilecek URL'yi belirler. |
| data | Opsiyonel. İstekle sunucuya gönderilecek verileri belirler. |
| function(response,status,xhr) |
Opsiyonel. İstek tamamlandığında çalışacak fonksiyonu belirler. Ek parametreler:
|
Ayrıntılı açıklama
Bu yöntem, sunucudan veri almanın en basit yöntemlerinden biridir. Neredeyse $.get(url, data, success) ile eşdeğerdir, ancak genel fonksiyon değil ve gizli bir geri bildirim fonksiyonuna sahiptir. Başarılı bir yanıt algılandığında (örneğin, textStatus "success" veya "notmodified" olduğunda), .load(), eşleşen elemanın HTML içeriğini döndürülen verilere ayarlar. Bu, bu yöntemin çoğu kullanımının çok basit olacağı anlamına gelir:
$("#result").load("ajax/test.html");
Eğer bir geri bildirim fonksiyonu sağlanırsa, post-processing sonrası bu fonksiyon çalıştırılır:
$("#result").load("ajax/test.html", function() {
alert("Load was performed.");
});
Yukarıdaki iki örnekte, mevcut belge "result" ID'sini içermiyorsa, .load() yöntemi çalışmaz.
Eğer sağlanan veri nesne ise POST yöntemini kullanılır; aksi takdirde GET yöntemi kullanılır.
Sayfa parçasını yüklemek
.load() yöntemi, $.get() ile farklı olarak, eklemek istediğimiz uzaktan belgenin bir kısmını belirlememizi sağlar. Bu, url parametresinin özel dilgeleriyle sağlanır. Eğer bu dizge bir veya daha fazla boşluk içeriyorsa, ilk boşluğun hemen ardından gelen dizge, yüklenmesi gereken içeriği belirleyen jQuery seçicisidir.
Yukarıdaki örneği değiştirerek, elde edilen belgenin bir kısmını kullanabiliriz:
$("#result").load("ajax/test.html #container");
Bu yöntemi çalıştırdığınızda, ajax/test.html içeriğini döndürecektir, ancak ardından jQuery, döndürülen belgeyi çözümleyerek, konteyner ID'li öğeyi arar. Bu öğe ve içeriği, sonuç ID'li öğeye eklenecektir; alınan belgenin geri kalanı atılacaktır.
jQuery, alınan belgeyi解析 ve mevcut belgeye eklemek için tarayıcının .innerHTML özelliğini kullanır. Bu süreçte, tarayıcı genellikle <html>, <title> veya <head> gibi öğeleri belgeden filtreler. Sonuç olarak, .load() ile alınan öğeler, tarayıcı tarafından doğrudan alınan belge ile tam olarak aynı olmayabilir.
Açıklama:Tarayıcı güvenlik sınırlamaları nedeniyle, çoğu "Ajax" istekleri aynı kaynak stratejisine uyar; farklı alan, alt alan veya protokolden veri almak başarısız olur.
Daha fazla örnek
Örnek 1
feeds.html dosyasının içeriğini yükleyin:
$("#feeds").load("feeds.html");
Örnek 2
Yukarıdaki örnekle benzer, ancak POST formunda ek parametreleri gönderir ve başarılı olduğunda bilgi gösterir:
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("Besleme besiksindeki son 25 girdi yüklendi");
});
Örnek 3
Makale kenar çubuğu navigasyonunu bir sıralı listeye yükleyin:
HTML kodu:
<b>jQuery Bağlantıları:</b> <ul id="links"></ul>
jQuery kodu:
$("#links").load("/Main_Page #p-Getting-Started li");
Daha fazla TIY örneği
- AJAX istekleri oluşturma ve bu istek ile veri gönderme
- AJAX istekleri ile nasıl veri gönderilir data parametresi kullanılarak. (Bu örnek AJAX eğitiminde açıklanmıştır.)
- AJAX istekleri oluşturma ve geri çağrı fonksiyonu ile kullanma
- AJAX isteklerinden gelen veri sonuçlarını nasıl function parametresi ile işlemek.
- Hatalı AJAX istekleri oluşturma
- AJAX isteklerinde hataları nasıl function parametresi ile işlemek (XMLHttpRequest parametresi kullanarak) öğrenilir.
