how to send json data headers to api

Question

I am trying to send SMS through my web app, I bought bulk SMS from SMS supplier, trying to engage with their api.thanks in advance for your help

I post the data through postman and it works (post method, headers section), when I post data from my webpage to their URL it doesn't work,

$(document).ready(function() {
 // Add event listener for opening and closing details
 $('#testbut').on('click', function() {
  var Username = 'xxxxxx';
  var password = 'xxxxx';
  var language = '1';
  var sender = 'RitaFoods';
  var Mobile = '2011xxxxx';
  var message = 'hello from the other side';
  $.ajax({
   url: "https://smsmisr.com/api/webapi/?",
   method: "POST",
   "headers",
   data: {
    Username: Username,
    password: password,
    language: language,
    sender: sender,
    Mobile: Mobile,
    message: message
   },
   dataType: "JSON",
   success: function(data) {
    alert("done");
    alert(JSON.stringify(data));;
   }
  })
 });
});

when I sending this data to another page on my web site, I received it with no problem , and i response with the parameters and alert it, when I sending to api url it gives no response, maybe because I need to send in headers section but I don't know how to do this.

`"headers": { }` try passing the headers inside the header property — Kunal Mukherjee, Jan 07 '19 at 09:46
"it doesn't work" — This is not a clear problem statement. What happens? What does the Network tab of the browser's developer tools show? What does the Console show? You have a `success` handler but no `error` hander, add one. — Quentin, Jan 07 '19 at 09:50
"I post the data through postman" — How is postman configured? What content-type are you encoding the data ask? — Quentin, Jan 07 '19 at 09:51
"maybe because I need to send in headers section" — What makes you think this? — Quentin, Jan 07 '19 at 09:51
sorry because it is not clear i am new in developing so i will check the network tab , and send screenshot, but i don't know how to make error hander — amr magdy, Jan 07 '19 at 09:53
You're making an HTTP request to a service which requires a username and password and then sends SMS to people (which usually costs money and is something spammers love). Handing that username and password over to everyone who visits your website seems like a terrible idea, so the API probably isn't designed to allow it, and once you look at the error messages I bet this will turn out to be a duplicate of [this](https://stackoverflow.com/a/35553666/19068) — Quentin, Jan 07 '19 at 09:53

ztadic91 · Answer 1 · 2019-01-07T09:53:55.710

0

You can set header with the beforeSend function

$.ajax({
  url: "https://smsmisr.com/api/webapi/?",
  method: "POST",
  data: {
    Username: Username,
    password: password,
    language: language,
    sender: sender,
    Mobile: Mobile,
    message: message
  },
  beforeSend: function(xhr){xhr.setRequestHeader('My-Custom-Header', 'My-Value');},
  dataType: "JSON",
  success: function (data) {
    alert("done");
    alert(JSON.stringify(data));;
  }
});

or via the headers field

$.ajax({
  url: "https://smsmisr.com/api/webapi/?",
  method: "POST", "headers",
  data: {
    Username: Username,
    password: password,
    language: language,
    sender: sender,
    Mobile: Mobile,
    message: message
  },
  headers: {
    'My-Custom-Header': 'My-Value',
  },
  dataType: "JSON",
  success: function (data) {
    alert("done");
    alert(JSON.stringify(data));;
  }
});

edited Jan 07 '19 at 09:53

answered Jan 07 '19 at 09:47

ztadic91

2,774
1
15
21

do you think i must remove data field and add all the parameters in the headers field ? – amr magdy Jan 07 '19 at 09:56
that depends on the API requirements, look at their docs and see what goes in the payload and what in the headers – ztadic91 Jan 07 '19 at 09:59
when i use postman i send all parameters in headers and it works , i will try it now – amr magdy Jan 07 '19 at 10:10

score 0 · Answer 2 · answered Jan 07 '19 at 10:03

Look at the API documentation.

It says "Post in header not in body", but as a description of what you need to do, this is wrong.

Look at the examples. They show that the data is encoded in the query string of the URL. In HTTP terms, that means it goes in the start line, not a header.

So you need to do something like:

  var url = new URL("https://smsmisr.com/api/webapi/?");
  url.searchParams.append("Username", Username);
  url.searchParams.append("Password", password);
  // etc etc

  $.ajax({
   url: url,
   method: "POST",
   dataType: "JSON",
   success: function(data) {
    alert("done");
    alert(JSON.stringify(data));;
   }
  })

See this answer if you need compatibility with older browsers.

Be warned that you are likely to run into the problem described in this question.

score -2 · Answer 3 · answered Jan 07 '19 at 09:48

-2

try to add in your ajax

contentType: "application/json"

$.ajax({
        type: "POST",
        url: **your URL**,
        data: **your DATA**,
        contentType: "application/json",
});

answered Jan 07 '19 at 09:48

20yco

876
8
28

They are not posting JSON data. So that would be wrong. – Quentin Jan 07 '19 at 09:48
@Quentin oh, sorry – 20yco Jan 07 '19 at 09:50

how to send json data headers to api

3 Answers3