Főoldalra

jQuery $.getScript()


Külső JavaScript program futtatása, AJAX kérés segítségével. 
Syntaxis:
$.getScript("matematika.js");
$(selector).getScript(url,success(response,status))
vagy így
$.getScript(url,success(response,status))

 Paraméterei 			        
    url                                    Kötelező megadni. Az "url" szó helyére, azt az URL-címet, amelyre a kérést el kell küldeni.

    success(response,status)    Választható, nem kötelező. A kérés sikeressége esetén, milyen függvényt kell futtatni.

                    Függvényhívások értelmezése:
                        response   A kérés eredményadatait tartalmazza.
                        status       Tartalmazza a kérés állapotát.
                                          Várható kérési állapotok:
                                          - success,              Siker, azaz, kérés sikeres volt.
                                          - notmodified,          Nem módosítot.
                                          - error,                    Hiba történt.
                                          - timeout,                Időtúllépés.
                                              or                         vagy
                                          - parsererror            Értelmező hiba történt.



Teszt példák.

Ne feledjük, ha js programunk ékezetes karaktereket is tartalmaz, akkor UTF-8 BOM vagy UTF-8 kódolással legyen elmentve.



1.Példa. Űrlapadatok feldolgozása.

Hogyan teszteljük a $.getScript() meghatározással történő, általunk létrehozott JavaScript fájl, meghívását.
Űrlapon, hagyjuk vagy módosíthatjuk a már beírt adatokat.

  1. Elsőként:
    Kattintsunk az űrlap button küldőgombjára. ( Nem történik semmi.)
  2. Másodszor:
    Kattintsunk a JavaScript meghívása button gombra, majd ezt követően az űrlap küldőgombjára. Megkapjuk az eredményt.
  3. Harmadszor:
    Frissítsük az oldalt, és ismételjük meg a tesztet. Megfigyelhetjük, adatfeldolgozás addig nem lesz, még a scriptet meg nem hívjuk.
    JavaScriptet meghívni csak egyszer és akkor kell, amikor belépünk az oldalra, vagy frissítettük az oldalt.

Ez egy teszt űrlap. Feldolgozandó adatot, írjuk be a szövegablakokba:

Szorzó:

Szorzandó:





JavaScript programmal feldolgozott tartalom:

Lekérdezés eredménye:


<head>
 <title>jquery-getScript</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script language="JavaScript" type="text/javascript" src="jq_getScript.js"></script>
</head>

<body>
<table class="mintatabla">
<tr><td>

<form name="MatekTeszt" id="MatekTeszt">
  <p> Ez egy teszt űrlap. Feldolgozandó adatot, írjuk be a szövegablakokba: <br><br>
    Szorzó: <input type="number" name="szorzo" value="10">   <br><br>
    Szorzandó: <input type="number" name="szorzando" value="25">   <br><br>
    <input type="button" value="Button Küldőgomb. Kattints ide!" onClick="Jsmatek();">
  </p>
</form> 

<br><hr><br>

<button id="btnurlap">JavaScript meghívása.<br>Katt ide.!</button>   <br><br>

</td><td>
    <p><strong>JavaScript programmal feldolgozott tartalom:</strong></p>
    <p><strong>Lekérdezés eredménye:</strong><br><br>   <span id="jsadatok"></span>   </p>
</td></tr>
</table>

</body>

Gyakorláshoz:
Hozzunk létre egy "mintak" nevű mappát, melybe elhelyezzük a "matematika.js" fált.		 jQuery $.getScript() 
// --- matematika.js fájl tartalma.

function Jsmatek(){
id=document.getElementById("jsadatok")
id.innerHTML ="Ez JavaScript példa!<br>";

a=document.MatekTeszt.szorzo.value;
b=document.MatekTeszt.szorzando.value;
var c="";

if(a =="" && b ==""){ id.innerHTML ="Nincs feldolgozhato adat!"; }
else{
            id.innerHTML +="Elküldött űrlapadatok feldolgozása, a meghivott külső JS fájlba:<br>";
            c=a*b;
            id.innerHTML +="szorzó="+a;
            id.innerHTML +="<br>szorzandó="+b;
            id.innerHTML +="<br>Eredmény="+c;
       }
}

// jq_getScript.js fájl tartalma.

$(document).ready(function(){
    $("#btnurlap").click(function(){
        $.getScript("mintak/matematika.js");
    });
});





Példa, animációs JavaScript meghívására.

Külső JavaScript -- mintak/jscript_animate.js -- fájl tartalma.

$(document).ready(function(){
	// fényelnyelés és felfedés --------------------------------------------------------------
		$("#fad01").fadeToggle();
	  
	// ---------------------------------------------------------------------------------------
		var div = $("#dia");
		div.css("background-color", "yellow");
		div.animate({height: "50", width:"150"}, 3000, diaVissza);
	 
		function diaVissza() {
			var div = $("#dia");
			div.animate({height: "100", width:"99%"}, 3000);
			div.css("background-color", "green");
		};
});


<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   
<script>
$(document).ready(function(){

// Külső JavaScript fájlt, meghívjuk a getScript metódussal.
		$("#pelda01").click(function(){
				$.getScript("mintak/jscript_animate.js");
		});
});
</script>

</head>

<body>
<button id="pelda01"> Animate Start.<br>Kattints ide! </button>

	<div style="width: 100%; height: 100px;">
		<div id="fad01"  style="width: 99%; height: 100px; margin-top: 0.1px; padding: 0.1px; background-color: orange;">
				Láthatósági teszt. Elhalványulási sebesség, nincs meghatározva.<br />
				fadeOut(); Elnyelés.<br />
				fadeIn(); Felfedés.<br />
				fadeToggle(); elrejt/felfed
		</div>
	</div>

	<div style="width: 100%; height: 100px;"> 
		<div id="dia"  style="width: 99%; height: 100px; margin-top: 0.1px; padding: 0.1px; background-color: green;">
			<center><p> div id="dia" </p></center>
		</div> 
	</div>
</body>



Láthatósági teszt. Elhalványulási sebesség, nincs meghatározva.
fadeOut(); Elnyelés.
fadeIn(); Felfedés.
fadeToggle(); elrejt/felfed

div id="dia"






JavaScriptnek nem küldhetünk $.get() vagy $.pos() adatot.
Ezért itt, a script tartalmát kapjuk vissza.

JavaScript fájl, megírt tartalmát adja vissza, és nem az adatok értékét.
Ebben az esetben arra jó, hogy a JavaScript fáj tartalmát, ellenőrzés céljából, tetszőleges oldalon, helyen, megtekinthetjük. 

	$("#javascript01").click(function(){
		$.get("mintak/matematika.js",
			{
				szorzo:100,
				szorzando:25
			},
		function(data, status){
			alert("Adatok:\n " + data + "\n\nStatus értéke: " + status);
		});
	});