CODEWITHSUNDEEP
javascriptphphtmlajax
user964627
user964627

Reputation: 665

Javascript POST to API

So I am a bit lost and hoping you can help me out. I am writing an app in simple PHP/HTML/Javascript app.

My Goal: To POST json data to an API.

How can I go about this? I just can't find any good examples to show me the best way to handle this.

In my request I need to send Basic Authorization as well as the json values.

This is what I have right now

$.ajax({
  type: "POST",
  url: "host.com/api/comments",
  dataType: 'json',
  async: false,
  headers: {
    "Authorization": "Basic xxxxxxxxxxxxxxxxxxxxxxx"
  },
  data: '{"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}}',
  success: function (){
    alert('Comment Submitted');
  }
});

I can't get the above code to work. Im using a button to call a function that will start the ajax call but nothing is happening.

Any help be be amazing! Thank You.

Upvotes: 0

Views: 84

Answers (3)

Jaromanda X
Jaromanda X

Reputation: 1

Nobody seems to have addressed one issue - the URL

If the page this is requested from is http://yourhost.com/path/file.html the request will be sent as http://yourhost.com/path/host.com/api/comments

As you have host.com in the URL, I assumed the request is to a different domain?

use one of

  1. http://host.com/api/comments
  2. https://host.com/api/comments
  3. //host.com/api/comments
  1. will only work if your page is loaded http and not https
  2. will work only if the remote API supports https
  3. will only always work properly if the remote API supports both http and https

The other issue is regarding the format of the sent data

The default content-type for $.ajax POST is application/x-www-form-urlencoded; charset=UTF-8

So, sending a POST request with various combinations of contentType and data shows the following

Firstly, without setting contentType

data: '{"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}}'

request is sent as formData '{"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}}'

data: {"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}},

request is sent as formdata, the following values:

                value1: 2.0
                value2: setPowerState
                value3[state]: 0

looks better, because there's actually multiple values, not just a string

Now, let's set contentType contentType: 'json', data: {"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}},

firefox does not tell me the format of the following string: 'value1=2.0&value2=setPowerState&value3%5Bstate%5D=0' - looks useless

And finally

contentType: 'json', data: '{"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}}',

sends the following JSON: '{"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}}'

So, finally, if the API requires JSON request data, and it's actually on a domain called "host.com"

$.ajax({
    type: "POST",
    url: "//host.com/api/comments",
    dataType: 'json',
    contentType: 'json', data: '{"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}}',
});

Upvotes: 0

Barmar
Barmar

Reputation: 781200

If you're writing the API in PHP, and it uses $_POST to get the parameters, you shouldn't send JSON. PHP only knows how to decode multipart/form-data and application/x-www-form-urlencode. If you pass an object to $.ajax, jQuery will use the urlencode format.

Just take the quotes off the object that you're passing to the data: option.

$.ajax({
  type: "POST",
  url: "host.com/api/comments",
  dataType: 'json',
  async: false,
  headers: {
    "Authorization": "Basic xxxxxxxxxxxxxxxxxxxxxxx"
  },
  data: {"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}},
  success: function (){
    alert('Comment Submitted');
  }
});

You also shouldn't use async: false, it is deprecated. Learn to write proper async code.

Upvotes: 0

Mohhamad Hasham
Mohhamad Hasham

Reputation: 2032

Use

contentType:"application/json"

You need to use JSON.stringify method to convert it to JSON format when you send it,

And the model binding will bind the json data to your class object.

The below code will work fine (tested)

$(function () {
var customer = {contact_name :"Scott",company_name:"HP"};
$.ajax({
    type: "POST",
    data :JSON.stringify(customer),
    url: "api/Customer",
    contentType: "application/json"
});
});

Upvotes: 1

Related Questions