jQuery ajax - getScript() metoden

jQuery Ajax referencemanual

Eksempel

Få og køør en JavaScript-fil gennem AJAX-anmodning:

$("button").click(function(){
  $.getScript("demo_ajax_script.js");
});

Prøv det selv

Definition og brug

getScript() metoden indlæser og udfører en JavaScript-fil via HTTP GET-anmodning.

Grammatik

jQuery.getScript(url,success(response,status});
Parametre Beskrivelse
url Den URL-streng, der skal anmodes.
success(response,status)

Valgfri. Angiver en tilbagekaldelsesfunktion, der skal køres, når anmodningen lykkes.

Ekstra parametre:

  • response - Indeholder resultaterne fra anmodningen
  • status - Indeholder status for anmodningen ("success", "notmodified", "error", "timeout" eller "parsererror")

Detaljeret beskrivelse

Denne funktion er en forkortet Ajax-funktion, der er lig med:

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

Denne tilbagekaldelsesfunktion modtager den tilbagevendende JavaScript-fil. Dette er normalt ikke så nyttigt, fordi scriptet allerede er kørt.

Indlæst script udføres i det globale miljø, så det kan referere til andre variabler og bruge jQuery-funktioner.

For eksempel indlæs en test.js-fil, der indeholder følgende kode:

$(".result").html("<p>Lorem ipsum dolor sit amet.</p>");

Ved at referere til filnavnet kan du indlæse og køre dette script:

$.getScript("ajax/test.js", function() {
  alert("Indlæsning udført.");
});

Kommentar:Før jQuery 1.2 version kunne getScript kun kalde JavaScript-filer fra samme domæne. I version 1.2 kan du kalde JavaScript-filer fra forskellige domæner. Bemærk: Safari 2 eller tidligere versioner kan ikke udføre scripts i globalt område synkront. Hvis du tilføjer scripts via getScript, skal du tilføje en forsinkelsefunktion.

Flere eksempler

Eksempel 1

Indlæs og udfør test.js:

$.getScript("test.js");

Eksempel 2

Indlæs og udfør test.js, og vis information efter succes:

$.getScript("test.js", function(){
  alert("Script indlæst og udført.");
});

Eksempel 3

Indlæs jQuery officiel farveanimation plugin Binde farveændringsanimation efter succes:

HTML kode:

<button id="go">Kør</button>
<div class="block"></div>

jQuery kode:

jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js",
 function(){
  $("#go").click(function(){
    $(".block").animate({ backgroundColor: 'pink' }, 1000)
      .animate({ backgroundColor: 'blue' }, 1000);
  });
});

jQuery Ajax referencemanual