Я не знаю, хотите ли вы спросить, как получить данные или как использовать AJAX для получения данных, потому что вы просто предоставляете только html, а не js. Если вы спросите, как использовать AJAX для извлечения данных из URL, вот несколько примеров:
function getCategories(){
const xhr = new XMLHttpRequest();
xhr.open('GET','https://stuaas.herokuapp.com/api/v1/organizations/categories',true);
xhr.send();
xhr.onload = function(){
if(this.status === 200){
const response = JSON.parse(this.responseText);
let output = '';
if (response.success) {
response.payload.data.forEach(function(cat){
output += `<option value = "${cat.id}">${cat.name}</option>`
});
document.querySelector('.categories-opt').innerHTML = output;
} else {
console.log('something went wrong!');
}
}
}
}
(getCategories)();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form class="form-signin" method="GET" action="https://stuaas.herokuapp.com/api/v1/organizations/categories">
<div class="form-label-group">
<select name="" class="form-control">
<option value="">Select your Account Type</option>
<option>Student</option>
<option>Organisation</option>
</select>
</div>
<div class="form-label-group">
<input type="name" id="inputName" class="form-control" placeholder="Organisational Name" required>
<label for="inputName">Organisation Name</label>
</div>
<div class="form-label-group">
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputEmail">Email address</label>
</div>
<div class="form-label-group">
<input type="tel" id="inputPhone" class="form-control" placeholder="Phone Number" required autofocus>
<label for="inputPhone">Phone Number</label>
</div>
<div class="form-label-group">
<input type="text" id="inputAddress" class="form-control" placeholder="Address" required autofocus>
<label for="inputAddress">Address</label>
</div>
<div class="form-label-group">
<input type="text" id="inputDescription" class="form-control" placeholder="Description" required autofocus>
<label for="inputDescription">Description</label>
</div>
<div class="form-label-group">
<select name="categories" class="categories-opt form-control">
</div>
<div class="form-label-group">
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<label for="inputPassword">Password</label>
</div>
<div class="form-label-group">
<input type="password" id="inputPassword" class="form-control" placeholder="Retype Password" required>
<label for="inputPassword">Retype Password</label>
</div>
<button class="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Sign Up</button>
<hr class="my-4">
<button class="btn btn-lg btn-google btn-block text-uppercase" type="submit"><i class="fab fa-google mr-2"></i> Sign Up with Google</button>
</form>
<script src="app.js"></script>
</body>
</html>