Ajax JSON Data API


#1

Hi, I am using the following code trying to POST / add some property data through using this code https://api.beds24.com/json/createProperties and I am getting no errors and the console response looks ok (but I have very limited JSON API knowledge. Please could someone have a look and point me in the right direction. Thanks for looking.

Here is my code.

<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 type="text/javascript" src="/sample5/js/jquery-3.3.1.min.js"></script>
<!--<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': 'http://localhost:8081',
						'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE',
						'Access-Control-Allow-Headers': 'Content-Type, Authorization',
						},

			url:"https://api.beds24.com/json/createProperties",
			method:"POST",
			dataType: 'json',

			data: {
					"authentication": {
						"apiKey": "12345678910112344567898"
					},
					"createProperties": [
						{
							"name": "White house1",
							"propKey": "2222222222233333",
							"notifyUrl": "http:\/\/www.White1.com\/api\/newbookings",
							"roomTypes": [
								{
									"name": "White 1xx",
									"qty": "1",
									"minPrice": "10.00"
								},
								{
									"name": "White 2xx",
									"qty": "3",
									"minPrice": "10.00"
								}
							]
						},
						{
							"name": "New Property 2",
							"propKey": "2222222222244444",
							"notifyUrl": "http:\/\/www.White2.com\/api\/index.php?action=updatebooking",
							"roomTypes": [
								{
									"name": "White Sitex",
									"qty": "10",
									"minPrice": "10.00"
								},
								{
									"name": "White 1",
									"qty": "2",
									"minPrice": "10.00"
								}
							]
						}
					]
				  },	
			
		})
	
	}


</script>
</body>
</html>

Here is the console response to the request.

  1. Request URL:

https://api.beds24.com/json/createProperties

  1. Request Method:

POST

  1. Status Code:

200 OK

  1. Remote Address:

195.201.74.20:443

  1. Referrer Policy:

no-referrer-when-downgrade

  1. Response Headers

  2. Access-Control-Allow-Headers:

access-control-allow-headers,access-control-allow-methods

  1. Access-Control-Allow-Methods:

POST, GET, OPTIONS, PUT, DELETE

  1. Access-Control-Allow-Origin:

  2. Allow:

POST, GET, OPTIONS, PUT, DELETE

  1. Connection:

Keep-Alive

  1. Content-Length:

56

  1. Content-Type:

application/json

  1. Date:

Wed, 05 Sep 2018 10:43:07 GMT

  1. Keep-Alive:

timeout=5, max=99

  1. Server:

Apache

  1. Request Headers

  2. Provisional headers are shown

  3. Accept:

application/json, text/javascript, /; q=0.01

  1. Access-Control-Allow-Headers:

Content-Type, Authorization

  1. Access-Control-Allow-Methods:

GET,PUT,POST,DELETE

  1. Content-Type:

application/x-www-form-urlencoded

  1. Origin:

http://localhost:8081

  1. Referer:

http://localhost:8081/sample5/getajax_bed24v2.html

  1. User-Agent:

Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

  1. Form Dataview sourceview URL encoded

  2. authentication[apiKey]:

12345678910111213141516

  1. createProperties[0][name]:

White house1

  1. createProperties[0][propKey]:

2222222222233333

  1. createProperties[0][notifyUrl]:

http://www.White1.com/api/newbookings

  1. createProperties[0][roomTypes][0][name]:

White 1xx

  1. createProperties[0][roomTypes][0][qty]:

1

  1. createProperties[0][roomTypes][0][minPrice]:

10.00

  1. createProperties[0][roomTypes][1][name]:

White 2xx

  1. createProperties[0][roomTypes][1][qty]:

3

  1. createProperties[0][roomTypes][1][minPrice]:

10.00

  1. createProperties[1][name]:

New Property 2

  1. createProperties[1][propKey]:

2222222222244444

  1. createProperties[1][notifyUrl]:

http://www.White2.com/api/index.php?action=updatebooking

  1. createProperties[1][roomTypes][0][name]:

White Sitex

  1. createProperties[1][roomTypes][0][qty]:

10

  1. createProperties[1][roomTypes][0][minPrice]:

10.00

  1. createProperties[1][roomTypes][1][name]:

White 1

  1. createProperties[1][roomTypes][1][qty]:

2

  1. createProperties[1][roomTypes][1][minPrice]:

10.00


#2

I think you’d better use an existing library to interact with the backend there’s a list at http://jsonapi.org/implementations/