Metoda jQuery ajax - getScript()

Przykład

Pobieranie i uruchamianie pliku JavaScript za pomocą żądania AJAX:

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

Spróbuj sam

Definicja i użycie

Metoda getScript() ładuje i wykonuje plik JavaScript za pomocą żądania HTTP GET.

Gramatyka

jQuery.getScript(url,success(response,status});
Parametry Opis
url Ciąg znaków URL do żądania.
success(response,status)

Opcjonalne. Określa funkcję zwrotną do wykonania po pomyślnym zakończeniu żądania.

Dodatkowe parametry:

  • response - Zawiera dane wynikowe z żądania
  • status - Zawiera stan żądania ("success", "notmodified", "error", "timeout" lub "parsererror")

Szczegółowe wyjaśnienie

Ta funkcja jest skróconą wersją funkcji Ajax, która jest równoważna:

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

Funkcja zwrotna dostarcza zwrócony plik JavaScript. Zwykle nie jest to zbyt użyteczne, ponieważ w tym momencie skrypt już działa.

Załadowany skrypt jest wykonywany w kontekście globalnym, więc może odnosić się do innych zmiennych i używać funkcji jQuery.

Na przykład załadowanie pliku test.js, który zawiera poniższy kod:

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

Przez odniesienie do nazwy tego pliku można załadować i uruchomić ten skrypt:

$.getScript("ajax/test.js", function() {
  alert("Załadunek został wykonany.");
});

Komentarz:Przed wersją 1.2 jQuery getScript mógł wywoływać pliki JS z tej samej domeny. W wersji 1.2 możesz wywoływać pliki JavaScript z innej domeny. Uwaga: Safari 2 lub wcześniejsze wersje nie mogą wykonywać skryptów w kontekście globalnym w sposób synchroniczny. Jeśli skrypt jest dodawany za pomocą getScript, dodaj funkcję opóźniającą.

Więcej przykładów

Przykład 1

Wczytaj i uruchom test.js:

$.getScript("test.js");

Przykład 2

Wczytaj i uruchom test.js, po powodzeniu wyświetl komunikat:

$.getScript("test.js", function(){
  alert("Skrypt został załadowany i wykonany.");
});

Przykład 3

Wczytaj Oficjalny wtyczka animacji kolorów jQuery Po powodzeniu powiązanie animacji zmiany koloru:

Kod HTML:

<button id="go">Run</button>
<div class="block"></div>

Kod jQuery:

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);
  });
});