Writing your code
Full Code Snippet
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var url = 'https://api.ordnancesurvey.co.uk/places/v1/addresses/find?query=Ordnance Survey, Adanac Park, Southampton';
var apiKey = '&key=INSERT USER KEY HERE';
$.getJSON(url + apiKey, function(data){
console.log(data);
});
});
</script>
Breakdown
- Access the JQuery Javascript library. This example is using Google’s JQuery Version 2.1.4 CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
- Define the client-side scripting and setup the javascript to run once the page has loaded
<script type="text/javascript">
$(document).ready(function() {
});
- Here the URL is declared as the variable “url” and the API key as the variable “apiKey”. This is to make the API key more manageable in the situation that it needs to be changed. The default mandatory parameters of the resource have to be present in the request, or concatenated into it before being passed on to the service.
var url = 'https://api.ordnancesurvey.co.uk/places/v1/addresses/find?query=Ordnance Survey, Adanac Park, Southampton';
var apiKey = '&key=INSERT USER KEY HERE';
- The URL variable is concatenated with the API key and using JQuery AJAX is sent to the service. As the default response is JSON, the “getJSON” function is used. The response is returned in the variable “data” which is then logged into the JavaScript developer console.
$.getJSON(url + apiKey, function(data){
console.log(data);
});
});
</script>
Running your code
The code above can be copied and pasted into a text editor or IDE and ran.
Github Page
The Github resource page containing further demonstrations and code snippets can be located here.