logo   Ajax shorthand.




Udover ajax() kan 5 andre jQuery metoder anvendes til at styre dataoverførsel. De er alle subset af ajax(), og nært knyttet til hentning af data. Tilknytningen til ajax() indebærer, at ajax() kan benyttes i stedet for, hvis man mangler en option i en shorthand.


Der refereres ofte samlet til de 5 metoder som 'Ajax shorthand'.


Fokus er i eksemplerne på hentning af data fremfor, hvordan de skal / kan bruges. Dette indebærer, at koden relateret til 'Response' kan komme til at se anderledes ud.


$.get()Sender forespørgsel til server og får svar tilbage.
$.getJSON()Bruger $.get til at hente JSON-data.
$.getScript()Bruger $.get til at hente jScript på serveren og udføre det.
$.post()Indtastning af &input-type data, der overføres til server til udførelse i php-program.
load()Bruger $.get til at hente indholdet i en specifik fil (f.eks. en RSS-fil).




I alle 5 tilfælde består event-scriptet af 3 niveauer indlejret i hinanden:

  • Indlæs
    Styrer, hvornår filen skal indlæses og være klar til brug. Den samme for alle jQuery hændelser.
  • Selektor og start
    Selektor og event. Den selektor og event (her Button for dem alle) der skal starte koden i niveau3.
  • Funktion med udførende kode
    Indtil 4 parametre: $.get( url, [data], [callback function], [type] )
    URL
    Sti til og ident for det php.program,
    data
    callback function
    type


$.get()


Henter specifik txt-fil fra lokalt netværk til samlet indsættelse i aktuel side. mysql

Det er kun nødvendigt at rette filnavn i nedenstående.


<script>
$(document).ready(function(){
   $("#loaddata").click(function(){
      $.get("../testfiler/txt_testfil01.txt",function(ajaxresult){
         $("#getrequest").html(ajaxresult);
      });
   });
});
</script>

HTML:
<button id="loaddata">Hent data</button>
<div id="getrequest"></div>
$.get()
Den ajax-funktion der skal udføres, samt sti til og navn på den fil på serveren, der skal hentes.
function(ajaxresult)
Funktion med brugervalgt navn på response.
$("#getrequest")
Brugervalgt ident for selektor til styring af, hvor de hentede data skal placeres på HTML-siden.
html(ajaxresult)
Det format, hvori de hentede data skal vises.
<div id="getrequest"></div>
Divboks til styring via selektor af, hvor de hentede data skal placeres.




$.getJSON()


Henter specifik JSON-fil fra lokalt netværk typisk til etablering af uddata. mysql


Nedenfor er fokuseret på hentning af filen, og ikke hvordan den skal bruges.


JSON-filer med arrays og parametre på niveau 2 eller højere kræver et særligt program til udpakning.


For under udvikling at sikre, at der er 'hul igennem' kan der etableres 'append' for et par af niveau-1 parametre - som beskrevet.


<script>
$(document).ready(function(){
   $("#btnjson").click(function(){
      $.getJSON("../../testfiler/a.json",function(ajaxresult){
          $("#forNavn").append(ajaxresult.fornavn);
          $("#efterNavn").append(ajaxresult.efternavn);
.....
      });
   });
});
</script>

HTML:
<button id="btnjson">Hent JSON fil</button>
<p id="forNavn">Fornavn: </p>
<p id="efterNavn">Efternavn: </p>
....
$.getJSON()
Den ajax-funktion der skal udføres, samt sti til og navn på den fil på serveren, der skal hentes.
function(ajaxresult)
Funktion med brugervalgt navn på response.
Rosponse:
$("#fornavn"), $("#efternavn")
Brugervalgt ident for selektor til tilknytning af parameter-navn til et <p-tag, tabelfelt etc. på HTML-siden.
append(ajaxresult.fornavn)
Styring af, hvor response-parameter-værdi skal placeres med parameter-navn som selektor.


I ovennævnte kode er anvendt denne JSON-fil.

{
    "fornavn": "Jens",
    "efternavn": "Hansen",
    "alder": 25,
    "addresse":
    {
       "gade": "Østergade 15",
       "postnr": "4711",
       "bynavn": "Nørre Snedig"
    },
    "telefon":
    [
       {
          "type": "Fast",
          "nummer": "123 456 78"
       },
       {
          "type": "Fax",
       "nummer": "123 456 79"
       }
    ]
}




$.getScript()


Henter en specifik .js-fil ind i klienten og udfører den. mysql


<script>
$(document).ready(function() {
    $("#driver").click(function(event){
       $.getScript('/jquery/result.js', function(jd) {
          // Call custom function defined in script
          CheckJS();
       });
    });
});
</script>


<p>Click on the button to load result.js file:</p>
<div id="stage" style="background-color:blue;">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />




$.post()


Indtastning af data i <input-type felter. Disse overføres til server og indgår i styingen af 'baggrunds' php-program. mysql

Der er intet <FORM-tag. Løsningen er en forenklet version af en normal <FORM.


<script>
$(document).ready(function(){
   $("#loaddata").click(function(){
      txtname=$("#txtinput").val();
      txtlocation=$("#txtlocation").val();
      $.post("baggrund.php",{ name:txtname, location: txtlocation },function(ajaxresult){
      $("#postrequest").html(ajaxresult);
      });
   });
});
</script>

HTML:
<div id="postrequest"></div>
Navn: <input type="text" id="txtinput">
Sted: <input type="text" id="txtlocation">
<button id="loaddata">Send data</button>
txtname=$("#txtinput").val() og txtlocation=$("#txtlocation").val()
Variabelnavn med tilknyttet selektor til < input type ... . samt værdifelt som en funktion.
("tags_ajax.php"
Sti til og navn på det php-program, der skal udføre post-aktiviteten. Se nedenfor.
name:txtname, location: txtlocation },function(ajaxresult)
Streng for hvert lt;Input-felt med: feltets 'name' og variabel,navn fra ovenfor. Svarer til 'value'-feltet.
function(ajaxresult)
Funktion med brugervalgt navn på response.
$("#postrequest")
Brugervalgt ident for selektor til styring af, hvor de hentede data skal placeres på HTML-siden.
html(ajaxresult)
Det format, hvori de hentede data skal vises og selektor til placering af response på HTML-side.


"baggrund.php"

$post_name=$_REQUEST["name"];
$post_location=$_REQUEST["location"];
if( $post_name )
   {
   echo "Anført navn: ". $post_name ."<br>";

   echo "Anført sted:" .$post_location;
}

I stedet for $_POST anvendes $_REQUEST til at overføre <input-type dataene fra klienten til serveren. Bortset derfra vil php.programmet være et almindeliget php-program, der udfører de relevante opgaver. Mulighederne for fejlrettelse synes dog ikke at være de bedste.




$.load()


Henter specifik fil til samlet indsættelse i et DOM-element. mysql


<script>
$(document).ready(function(){
    $("#loaddata").click(function(){
       $("#loadrequest").load("../../testfiler/txt_testfil01.txt");
    });
});
</script>


HTML:
<button id="loaddata">Hent fil</button>
<div id="loadrequest"></div>
$("#loadrequest")
Brugervalgt ident for selektor til styring af, hvor de hentede data skal placeres på HTML-siden.
load(ajaxresult)
ajax()-funktion, der som response sender data fra den tilknyttede fil til klienten i HTML-format.
<div id="loadrequest"></div>
Divboks til styring via selektor af, hvor de hentede data skal placeres.
x
x