mandag 19. desember 2011

Utviklerskolen del 2, hente data vha JQuery og Ajax

I denne delen skal jeg ta for meg ett enkelt eksempel på hvordan man kan benytte seg av regObs Odata api for å hente ut de forskjellige hendelsetypene i regObs. Jeg lager en enkel webside som kun benytter seg av JQuery og Ajax

Det første jeg gjør er å referere til JQuery som jeg bruker til å manipulere data i html siden og gjøre Ajax kall.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

Deretter legger jeg inn en div hvor jeg ønsker å vise hendelsetypene.
<div id="result"></div>

Neste trinn blir å bygge opp en url for å hente ut ønsket resultat.
Her vet jeg at data jeg ønsker å hente ligger i Entiteten GeoHazardKD og jeg filtrerer ut kun de norske tekstene (LangKey = 1). 
http://h-web01.nve.no/test_regobsservices/odata.svc/GeoHazardKD()?$filter=(cast(LangKey,'Edm.Int32')) eq 1

Da er det klart for å gjøre ett enkelt Ajax kall for å hente data. Før jeg gjør kallet så legger jeg til callback på url samt definerer at jeg ønsker json som format på data'ene mine. I tillegg har jeg laget en enkel displayfunksjon som lister ut data i div taggen som jeg definerte tidligere.

<script type="text/javascript">
    $(document).ready(function () {        
        var url = "http://h-web01.nve.no/test_regobsservices/odata.svc/GeoHazardKD()?$filter=(cast(LangKey,'Edm.Int32')) eq 1&$callback= displayResults&$format=json";
        $.ajax({
            dataType: 'jsonp',
            url: url
        });
    });
    function displayResults(results) {
        $.each(results.d.results, function (i, item) {
            $('#result').append(item.GeoHazardName +'<br />');
        });
    };
</script>

 Ved å sette dette sammen i en enkel html side så får du nå listet ut de forskjellige hendelsetypene i regObs.
Komplett eksempel kan lastes ned her

Ingen kommentarer:

Legg inn en kommentar