I am new to working with API’s (I have some ASP/JavaScript/SQL knowledge) and have spent the last week or so looking at lots of different solutions to access the JSON API located here https : // api. beds24 . com / json
The API is for a property booking solution and I’m looking to add properties, retrieve properties and bookings etc. I’m not looking for help achieving all the different API options, this one I am starting and struggling with is adding a new property to my property portfolio at the API endpoint found here https://api.beds24.com/json/createProperties
Once I have this working I should be able to work out the rest. I was hoping to use jQuery and Ajax as I need to eventually update an SQL database with my results from the API but for now just small steps, and to be honest will take what ever the best method is.
I have checked so many forums topics relating to the ‘Access-Control-Allow-Origin’ message in the log below and the API I am working with does this, they say (Yes they are allowed, we include the following header “Access-Control-Allow-Origin: *”) which I have added. I am working on a Windows Server my side and therefore PHP isn’t really an option.
Any help would be greatly appreciated. The system I am working on is a test system and this is the live API key so feel free to run the code. https://democontrol.wiredcontact.co.uk/apitest/index2.html Thanks for looking.
My code below and console errors to follow in the next post as I can’t have more than 2 links in a post 
<html>
<head>
<meta charset="UTF-8">
<title> Ajax and Json | Tutorial</title>
<style>
body{
font-family: sans-serif;
}
.ajax-container{
width: 50%;
margin: 50px auto;
}
#btnAjaxCall{
height: 50px;
width: 120px;
border: none;
border-radius: 6px;
color: white;
background: #3498db;
outline: none;
font-size: 22px;
opacity: 0.7;
padding: 10px;
}
#btnAjaxCall:hover{
cursor: pointer;
opacity: 1;
}
.item-details{
margin-top: 10px;
border: 1px solid #ddd;
padding: 6px;
}
</style>
</head>
<body>
<form method=post>
<div class="ajax-container">
<input type="button" id="btnAjaxCall" value="Ajax Call" />
<div class="display-data">
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
var count = 0;
$("#btnAjaxCall").click(function(){
fetchDataAndDisplay();
});
function fetchDataAndDisplay(){
$.ajax({
headers: {
'content-type': 'application/x-www-form-urlencoded',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE',
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
'content-type': 'application/json; charset=UTF-8'
},
url:"https://api.beds24.com/json/createProperties",
method:"POST",
dataType: 'json',
data: {
"authentication": {
"apiKey": "************************"
},
"createProperties": [{
"name": "AAAAbbbb 1",
"propKey": "2222222222888889",
"notifyUrl": "http:\/\/www.AAAAbbbb.com\/api\/newbookings",
"roomTypes": [{
"name": "Ab 1xx",
"qty": "1",
"minPrice": "10.00"
},
{
"name": "Ab 2xx",
"qty": "3",
"minPrice": "10.00"
}]
}]
},
})
}
</script>
</body>
</html>
Kind of hoping for some guidance on getting a working solution.