Kald RESTful API'er med jQuery AJAX

24/08/2025

★★★★★Rating: 3.92 (2227 votes)

I den moderne webudvikling er evnen til at kommunikere med backend-systemer afgørende. RESTful API'er er rygraden i denne kommunikation, og jQuery, et populært JavaScript-bibliotek, forenkler processen med at kalde disse API'er markant. Med jQuery's $.ajax() funktion kan udviklere nemt sende og modtage data fra web services, hvilket gør webapplikationer mere dynamiske og responsive. Denne artikel vil guide dig igennem, hvordan du udnytter jQuery til at foretage både GET- og POST-anmodninger, håndtere svar og implementere robust fejlhåndtering.

How to make API calls in jQuery Ajax? — In this example I will show you how easy it is to make such API calls in jQuery AJAX. The OpenWeatherMap API provides the complete weather information for any location on Earth including over 200,000 cities. This API provides the response in JSON format. To make your API call, first create your Free Account in their website and get your API KEY.

Indholdsfortegnelse

Hvad er RESTful API'er, og hvorfor vælge jQuery?
Grundlæggende jQuery AJAX for RESTful API'er
Udførelse af GET-anmodninger
Udførelse af POST-anmodninger
Håndtering af API-svar og fejl
Praktisk eksempel: Hent vejrdata med OpenWeatherMap API
Sammenligning: jQuery AJAX vs. ren XMLHttpRequest (XHR) og Fetch API
Bedste praksis for jQuery REST-kald
Ofte Stillede Spørgsmål (OSS)
Konklusion

Hvad er RESTful API'er, og hvorfor vælge jQuery?

REST (Representational State Transfer) er en arkitekturstil til design af netværksapplikationer. En RESTful API giver klienter mulighed for at interagere med serverressourcer ved hjælp af standardiserede HTTP-metoder som GET, POST, PUT, DELETE. Disse API'er returnerer typisk data i letlæselige formater som JSON eller XML.

jQuery har længe været et foretrukket værktøj for webudviklere, og dets AJAX-funktioner er en af de primære årsager. Her er hvorfor jQuery er et fremragende valg til at kalde RESTful API'er:

Forenklet Syntaks: jQuery tilbyder en meget mere kortfattet og læsbar syntaks sammenlignet med den traditionelle XMLHttpRequest, hvilket reducerer mængden af kode, der skal skrives.
Krydsbrowser-kompatibilitet: jQuery abstraherer de mange forskelle i, hvordan browsere håndterer AJAX-anmodninger, hvilket sikrer, at din kode fungerer ensartet på tværs af forskellige platforme uden yderligere indsats.
Effektiv Fejlhåndtering: Med dedikerede success og error callbacks (eller .done() og .fail() i Promise-baseret syntaks) er det nemt at håndtere både vellykkede svar og eventuelle problemer, der måtte opstå under anmodningen.
Rige Funktioner: Udover grundlæggende anmodninger understøtter jQuery AJAX også avancerede funktioner som indstilling af headers, håndtering af datatyper og asynkrone/synkrone kald (selvom asynkrone kald altid foretrækkes).

Grundlæggende jQuery AJAX for RESTful API'er

Kernen i jQuery's AJAX-funktionalitet er $.ajax() metoden. Denne alsidige funktion giver dig mulighed for at konfigurere alle aspekter af din HTTP-anmodning. For at komme i gang skal du først inkludere jQuery-biblioteket i din HTML-side. Det anbefales at bruge en CDN (Content Delivery Network) for hurtig og pålidelig adgang:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Efter at have inkluderet jQuery, kan du bruge $.ajax() til at foretage dine API-kald. Her er de mest almindelige parametre, du vil bruge:

Parameter	Beskrivelse	Eksempel
`url`	Den URL, som anmodningen sendes til.	`'https://api.example.com/data'`
`type` (eller `method`)	HTTP-metoden for anmodningen (GET, POST, PUT, DELETE).	`'GET'` eller `'POST'`
`data`	Data, der sendes til serveren. For POST/PUT, ofte et JavaScript-objekt.	`{ 'key': 'value' }`
`dataType`	Den forventede datatype for serverens svar (f.eks. 'json', 'xml', 'text').	`'json'`
`headers`	Et objekt med yderligere HTTP-headers.	`{ 'Authorization': 'Bearer token' }`
`success`	En callback-funktion, der udføres ved vellykket svar.	`function(response) { ... }`
`error`	En callback-funktion, der udføres ved fejl.	`function(xhr, status, error) { ... }`

Udførelse af GET-anmodninger

GET-anmodninger bruges til at hente data fra en server. De sender ikke et request body, men kan inkludere forespørgselsparametre i URL'en. Her er et eksempel på, hvordan du foretager en simpel GET-anmodning med jQuery for at hente en ressource:

<html> <head> <title>GET-anmodning med jQuery</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button id="hentDataBtn">Hent Data</button> <div id="resultat"></div> <script> $(document).ready(function() { $('#hentDataBtn').on('click', function() { $.ajax({ url: 'https://api.example.com/v1/me/following', // Erstat med din API-URL type: 'GET', headers: { 'Authorization': 'Bearer din_token_her', // Erstat med din faktiske token 'Content-Type': 'application/json' }, success: function(response) { // Håndter det succesfulde svar her $('#resultat').text(JSON.stringify(response, null, 2)); alert('Data hentet succesfuldt!'); }, error: function(xhr, status, error) { // Håndter fejl her $('#resultat').text('Fejl: ' + status + ' - ' + error + '\n' + xhr.responseText); alert('Fejl under hentning af data: ' + xhr.status); } }); }); }); </script> </body> </html>

I dette eksempel definerer vi URL'en til vores API-endpoint og indstiller type til 'GET'. Headers bruges ofte til autentificering (f.eks. med en Bearer token) og til at angive den forventede indholdstype. success-funktionen udføres, hvis anmodningen er vellykket, og error-funktionen, hvis der opstår en fejl. Det er god praksis at give brugeren feedback, uanset udfaldet.

What is the Socie REST API and how do I use it? — The Socie REST API can be used to create, read, update, or delete data from the Socie platform. This page provides useful information to get started and an overview of all available resources with their routes. Each route has their own detailed description on how to use it. This REST API can be used to interact with the Socie platform.

Udførelse af POST-anmodninger

POST-anmodninger bruges til at sende data til serveren for at oprette en ny ressource eller udføre en handling. Disse anmodninger inkluderer typisk et request body med de data, der skal sendes. Her er et eksempel på en POST-anmodning, der sender data:

<html> <head> <title>POST-anmodning med jQuery</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button id="sendDataBtn">Send Data</button> <div id="resultatPost"></div> <script> $(document).ready(function() { $('#sendDataBtn').on('click', function() { var dataToSend = { "useridval": "546789890", "itemname": "Ny Sang" }; $.ajax({ url: 'https://api.example.com/v1/me/tracks', // Erstat med din API-URL type: 'POST', headers: { 'Authorization': 'Bearer din_token_her', 'Content-Type': 'application/json' // Vigtigt for JSON-data }, data: JSON.stringify(dataToSend), // Konverter objekt til JSON-streng success: function(response) { $('#resultatPost').text(JSON.stringify(response, null, 2)); alert('Data sendt succesfuldt!'); }, error: function(xhr, status, error) { $('#resultatPost').text('Fejl: ' + status + ' - ' + error + '\n' + xhr.responseText); alert('Fejl under afsendelse af data: ' + xhr.status); } }); }); }); </script> </body> </html>

Nøgleforskellen her er type: 'POST' og brugen af data-parameteren. Når du sender JSON-data, er det afgørende at indstille 'Content-Type': 'application/json' i headers og at konvertere dit JavaScript-objekt til en JSON-streng ved hjælp af JSON.stringify(), før det sendes i data-parameteren.

Håndtering af API-svar og fejl

At håndtere svaret fra en API og eventuelle fejl er lige så vigtigt som at sende anmodningen. jQuery's $.ajax()-metode giver dig to callback-funktioner til dette formål: success og error.

Do you need a RESTful API for a mobile app? — Today, many websites use front-end JavaScript frameworks such as React.js or Vue.js that necessitate the backend to have some RESTful API. RESTful APIs are also required for mobile apps that use a backend application programming interface (API) to perform actions on behalf of a user.

Success Callback: Denne funktion udføres, når serveren returnerer et svar med en HTTP-statuskode, der indikerer succes (f.eks. 200 OK, 201 Created). Svaret fra serveren (ofte et JSON-objekt) vil blive videregivet som det første argument til denne funktion. Du kan derefter parse og bruge disse data til at opdatere din webapplikation.
Error Callback: Denne funktion udføres, hvis der opstår en fejl under anmodningen, enten på grund af et netværksproblem, en serverfejl (f.eks. 404 Not Found, 500 Internal Server Error) eller en anden HTTP-statuskode, der indikerer en fejl. Fejl-callback'en modtager tre argumenter: jqXHR-objektet (jQuery XMLHttpRequest), en statusstreng og en eventuel fejlbesked. Disse oplysninger er uvurderlige for fejlfinding.

Det er vigtigt at implementere robust fejlhåndtering for at give en god brugeroplevelse og for at forstå, hvad der gik galt, hvis anmodningen fejler. Du kan logge fejl til konsollen, vise brugervenlige fejlmeddelelser eller prøve at genfremsende anmodningen under visse omstændigheder.

Praktisk eksempel: Hent vejrdata med OpenWeatherMap API

Lad os se på et mere konkret eksempel, der bruger OpenWeatherMap API til at hente vejrdata. Dette demonstrerer, hvordan du kan hente data baseret på brugerinput og vise dem dynamisk på din side.

Først skal du oprette en gratis konto på OpenWeatherMap og få din API-nøgle. Den grundlæggende API-URL ser således ud:

http://api.openweathermap.org/data/2.5/weather?id=BYID&appid=DIN_API_N&units=metric

Her er HTML- og jQuery-koden til at hente og vise vejrdata:

<html> <head> <title>Vejrdata med jQuery AJAX</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> body { font-family: Arial, sans-serif; margin: 20px; } select, button { padding: 8px; margin-right: 10px; font-size: 16px; } #vejrInfo { margin-top: 20px; padding: 15px; border: 1px solid #ccc; border-radius: 5px; background-color: #f9f9f9; } #vejrInfo h3 { margin-top: 0; } .loading { display: none; text-align: center; margin-top: 20px; } .loading img { width: 50px; height: 50px; } </style> </head> <body> <h2>Hent Vejrdata for Byer</h2> <select id="bySelect"> <option value="">Vælg en by</option> <option value="5128581">New York</option> <option value="5391959">San Francisco</option> <option value="2643743">London</option> <option value="1275339">Mumbai</option> <option value="8199396">Santa Lucia</option> </select> <button id="hentVejrBtn">Hent Vejr</button> <div class="loading"> <img src="https://i.stack.imgur.com/hzkL6.gif" alt="Loading..."> <p>Indlæser vejrdata...</p> </div> <div id="vejrInfo"> <p>Vælg en by og klik 'Hent Vejr' for at se information.</p> </div> <script> $(document).ready(function() { var API_KEY = 'DIN_API_N'; // Erstat med din OpenWeatherMap API-nøgle $('#hentVejrBtn').on('click', function() { var selectedCityId = $('#bySelect').val(); if (selectedCityId === '') { $('#vejrInfo').html('<p style="color: red;">Vælg venligst en by.</p>'); return; } $('.loading').show(); // Vis loading-animation $('#vejrInfo').empty(); // Ryd tidligere resultater $.ajax({ url: 'http://api.openweathermap.org/data/2.5/weather?id=' + selectedCityId + '&appid=' + API_KEY + '&units=metric', type: 'GET', dataType: 'json', // Fortæller jQuery at forvente JSON-svar success: function(data) { $('.loading').hide(); // Skjul loading-animation var htmlOutput = '<h3>Vejr for ' + data.name + ', ' + data.sys.country + '</h3>'; htmlOutput += '<p><strong>Temperatur:</strong> ' + data.main.temp + '°C</p>'; htmlOutput += '<p><strong>Luftfugtighed:</strong> ' + data.main.humidity + '%</p>'; htmlOutput += '<p><strong>Vejr:</strong> ' + data.weather[0].description + '</p>'; $('#vejrInfo').html(htmlOutput); }, error: function(xhr, status, error) { $('.loading').hide(); // Skjul loading-animation $('#vejrInfo').html('<p style="color: red;">Fejl under hentning af vejrdata: ' + xhr.status + ' ' + xhr.statusText + '</p>'); console.error("AJAX fejl: ", status, error, xhr); } }); }); }); </script> </body> </html>

I dette eksempel bruges dataType: 'json' til at sikre, at jQuery automatisk parser svaret som JSON. Dataene fra API'en (data.name, data.main.temp osv.) bruges til at konstruere og vise en brugervenlig vejrudsigt på siden.

What is a JavaScript REST API? — A RESTful API is stateless, separates concerns between client-server, allows caching of data client-side and it utilizes standardized base URLs and methods to perform the actions required to manipulate, add or delete data. In this path you will learn what a JavaScript REST API is and how to begin creating them for your projects.

Sammenligning: jQuery AJAX vs. ren XMLHttpRequest (XHR) og Fetch API

Mens jQuery AJAX er utrolig praktisk, er det værd at bemærke, at der findes andre metoder til at foretage HTTP-anmodninger i JavaScript:

XMLHttpRequest (XHR): Dette er den oprindelige måde at lave AJAX-kald på i JavaScript. Den er mere verbos og kræver mere manuel håndtering af tilstande og events. jQuery's AJAX-funktioner er i virkeligheden en abstraktion oven på XHR for at gøre det nemmere.
Fetch API: En moderne, Promise-baseret API til netværksanmodninger, der er indbygget i de fleste moderne browsere. Fetch API er designet til at være en mere kraftfuld og fleksibel erstatning for XHR. Den returnerer Promises, hvilket gør den ideel til brug med async/await for mere læsbar asynkron kode.

Selvom Fetch API er den anbefalede metode til nye projekter i rent JavaScript, forbliver jQuery AJAX et fremragende valg for projekter, der allerede bruger jQuery, eller hvor udviklere foretrækker dens enkelhed og brede browserunderstøttelse uden at skulle polyfille.

Bedste praksis for jQuery REST-kald

For at sikre, at dine jQuery AJAX-kald er effektive, sikre og robuste, skal du overveje følgende bedste praksis:

Asynkrone Kald: Brug altid asynkrone kald (standard i jQuery AJAX). Synkrone kald blokerer browserens hovedtråd og får din side til at fryse, indtil svaret modtages.
Fejlhåndtering: Implementer altid både success- og error-callbacks. Håndter specifikke HTTP-statuskoder (f.eks. 401 Unauthorized, 404 Not Found) for at give meningsfuld feedback til brugeren.
Sikkerhed: Undgå at hardkode følsomme API-nøgler eller autentificeringstokens direkte i din klient-side JavaScript. Overvej at bruge en proxy på serversiden eller sikre, at dine tokens kun er gyldige i en kort periode.
Cross-Origin Resource Sharing (CORS): Vær opmærksom på CORS-politikker. Hvis din klient-side applikation (f.eks. http://localhost:8000) forsøger at kalde en API på et andet domæne (f.eks. https://api.example.com), skal serveren konfigureres til at tillade disse krydsdomæneanmodninger. Ellers vil browseren blokere anmodningen af sikkerhedsgrunde.
Indlæsningsindikatorer: Vis en indlæsningsindikator (f.eks. en spinner eller tekst) til brugeren, mens AJAX-kaldet behandles. Dette forbedrer brugeroplevelsen ved at give visuel feedback på, at noget sker.
Validering: Valider altid brugerinput, før du sender det til API'en. Dette reducerer unødvendige API-kald og forbedrer sikkerheden.
Apidog og Kode-generering: Værktøjer som Apidog kan være yderst nyttige. De kan hjælpe med at teste API'er og endda automatisk generere jQuery-kode-snippets for dine API-anmodninger, hvilket sparer tid og minimerer fejl.

Ofte Stillede Spørgsmål (OSS)

Hvordan sender jeg autentificerings-headers med jQuery AJAX?

Du sender autentificerings-headers ved at inkludere et headers-objekt i din $.ajax()-konfiguration. For eksempel, for en Bearer token:

headers: { 'Authorization': 'Bearer din_aktuelle_token_her', 'Content-Type': 'application/json' }

Erstat 'din_aktuelle_token_her' med din faktiske JWT eller API-nøgle.

How do I expose a database using REST APIs in API Express? — There are two general steps in working with this database and exposing it via REST APIs in API Express: Create a database connection. Automatically generate REST APIs for a database table. Let's start with the first step: creating a database connection. You might also like this video for detailed instructions on how to:

Hvordan sender jeg JSON-data i et POST- eller PUT-request?

For at sende JSON-data skal du først konvertere dit JavaScript-objekt til en JSON-streng med JSON.stringify() og derefter angive 'Content-Type': 'application/json' i dine headers:

data: JSON.stringify({ 'navn': 'Eksempel', 'værdi': 123 }), headers: { 'Content-Type': 'application/json' }

Hvad hvis API'en kræver en anden HTTP-metode som PUT eller DELETE?

Du ændrer blot værdien af type-parameteren i din $.ajax()-konfiguration. For eksempel:

$.ajax({ url: 'https://api.example.com/ressource/123', type: 'PUT', // Eller 'DELETE' // ... andre parametre });

Hvad er CORS, og hvordan påvirker det mine kald?

CORS (Cross-Origin Resource Sharing) er en sikkerhedsfunktion i webbrowsere, der forhindrer websteder i at foretage AJAX-anmodninger til et andet domæne end det, de selv kommer fra. Hvis din frontend (f.eks. example.com) forsøger at kontakte en API på et andet domæne (f.eks. api.anotherexample.com), skal API-serveren eksplicit tillade dette via CORS-headers. Hvis ikke, vil browseren blokere anmodningen, og du vil se en fejl i konsollen.

Konklusion

At mestre RESTful API-anmodninger med jQuery er en grundlæggende færdighed for enhver webudvikler. jQuery's brugervenlighed, brede browserunderstøttelse og evne til at abstrahere kompleksiteter gør det til et ideelt valg for udviklere på alle erfaringsniveauer. Ved at følge de trin og bedste praksis, der er beskrevet i denne artikel, kan du effektivt integrere data fra eksterne services i dine webapplikationer og skabe mere interaktive og dynamiske brugeroplevelser. Husk altid at fokusere på robust fejlhåndtering og sikkerhed for at sikre en stabil og pålidelig applikation.

Hvis du vil læse andre artikler, der ligner Kald RESTful API'er med jQuery AJAX, kan du besøge kategorien Teknologi.