Ang metoda ng AJAX load() ng jQuery

Ang metoda ng load() ng jQuery

Ang metoda ng load() ng jQuery ay isang simpleng pero malakas na AJAX na metoda.

Ang metoda ng load() ay nangangalaga ng paglalaad ng data mula sa server at ipinapalit sa piniling elemento ang ibinabalik na data.

Pangungusap:

$("}}selector).load(URL,data,callback);

Hindi opsyonal URL Ang pamamaraan ay nagbibigay-daan ng URL na inaanyayahan na lalagay.

Opsyonal data Ang pamamaraan ay nagbibigay-daan ng kumbinasyon ng mga string na nagsisimula sa pangalan ng query string na nagsisimula sa "key" at "value" na maglalaad kasama ang kahilingan.

Opsyonal callback Ang mga pamamaraan ay pangungusap na gagawin kapag nakumpleto ang load() na pamamaraan.

Ito ay nilalaman ng halimbawa na file ("demo_test.txt"):

<h2>jQuery at AJAX ay TONDO!!!</h2>
<p id="p1">Ito ay isang teksto sa isang talata.</p>

Ang sumusunod na halimbawa ay maglalaad ng nilalaman ng file na "demo_test.txt" sa tinukoy na <div> na elemento:

Mga halimbawa

$("#div1").load("demo_test.txt");

Subukan nang sarili

Maaari ring idagdag ang jQuery selector sa URL na pamamaraan.

Ang sumusunod na halimbawa ay maglalaad ng nilalaman ng elemento na may id="p1" mula sa "demo_test.txt" na file sa tinukoy na <div> na elemento:

Mga halimbawa

$("#div1").load("demo_test.txt #p1");

Subukan nang sarili

Ang opsyonal na callback na pamamaraan ay nagbibigay-daan ng callback function kapag nakumpleto ang load() na pamamaraan. Ang callback function ay maaaring magtala ng iba't ibang mga pamamaraan:

  • responseTxt - Naglalaman ng nilalaman ng tagumpay ng pagtawag
  • statusTXT - Naglalaman ng kalagayan ng pagtawag
  • xhr - Naglalaman ng XMLHttpRequest na bagay

Ang mga sumusunod na halimbawa ay magpapakita ng isang alert box kapag nakumpleto ang load() na pamamaraan. Kapag matagumpay ang load() na pamamaraan, magpapakita ito ng "Matagumpay na nangangalaga ng panlabas na nilalaman!" at kapag bigo, magpapakita ito ng mensaheng error:

Mga halimbawa

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("Matagumpay na nangangalaga ng panlabas na nilalaman!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

Subukan nang sarili

Mga paliwanag ng jQuery AJAX

Kung gusto mong makita ang kumpletong pagkilala ng mga AJAX na pamamaraan, mangyaring bisitahin ang aming Mga paliwanag ng jQuery AJAX。