How can I send JSON data to server

Question

Well, here is the story:

I have some data need to send to server, but they should turned into JSON dataType first.

I made such ajax call:

    $.ajax({
       url: url, // the url I want to post to.
       type: 'POST',
       contenttype:'application/json; charset=utf-8',
       beforeSend: //some HTTP basic auth stuff
       data: {
          name:'test',
          key:'foo',
          key2:'bar'
       },
       dataType:'JSON'
});

basically I'm expecting the data I send to server was:

[name:test,key:foo,key2:bar]

but what I've got was:

name=test&key=foo&key2=bar

What did I missing? How can I get those data into JSON?

possible duplicate of Send JSON to the server using jQuery

Chris Moschini
– Chris Moschini

2013-09-02 22:20:02 +00:00
Commented Sep 2, 2013 at 22:20 — Chris Moschini
– Chris Moschini, Commented Sep 2, 2013 at 22:20

ShiftyThomas · Accepted Answer · 2016-10-04 12:27:36Z

23

 var data = {'bob':'foo','paul':'dog'};
 $.ajax({
   url: url,
   type: 'POST',
   contentType:'application/json',
   data: JSON.stringify(data),
   dataType:'json'
 });

/** Added **/

The above does not do anything with the response from the server if you need to do something then a callback will be called when the server has responded.

 var data = {'bob':'foo','paul':'dog'};
 $.ajax({
   url: url,
   type: 'POST',
   contentType:'application/json',
   data: JSON.stringify(data),
   dataType:'json',
   success: function(data){
     //On ajax success do this
     alert(data);
      },
   error: function(xhr, ajaxOptions, thrownError) {
      //On error do this
        if (xhr.status == 200) {

            alert(ajaxOptions);
        }
        else {
            alert(xhr.status);
            alert(thrownError);
        }
    }
 });

edited Oct 4, 2016 at 12:27

answered Jan 4, 2013 at 10:57

ShiftyThomas

4765 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

shanehoban Over a year ago

Does this post a response? Or perhaps a better question, is there a way to post without dealing with a response; like kind of like a stream with just one packet

ShiftyThomas Over a year ago

This does not handle any returned response from the server.

shanehoban Over a year ago

Thanks, and would $.post be better then, if all I want to do is send a request with some data; and not care about the return?

ShiftyThomas Over a year ago

$.post is just a shortened version of $.ajax (api.jquery.com/jquery.post) so neither is 'better' $.post has a callback function for return of data too. I like to use $.ajax just because I always have.

Jonas · Accepted Answer · 2011-06-07 11:08:34Z

4

I've had the same problem. You can't send an object as "data", you need to stringify the object. Try this instead, with your object stringified:

$.ajax({
       url: url,
       type: 'POST',
       contentType:'application/json',
       data: '{
          name:"test",
          key:"foo",
          key2:"bar"
       }',
       dataType:'json'
});

answered Jun 7, 2011 at 11:08

Jonas

130k103 gold badges330 silver badges408 bronze badges

1 Comment

Yatrix Over a year ago

I've seen this too, but I've seen examples that show it like this: data: {name: 'test', key: 'foo', key2: 'bar'}. It fails every time when I try to code it like that

Jānis Gruzis · Accepted Answer · 2014-05-20 14:00:09Z

2

Try this: http://www.abeautifulsite.net/blog/2008/05/postjson-for-jquery/

Its a lot shorter:

$.post(url, data, function(response) {
    // Do something with the response
}, 'json');

edited May 20, 2014 at 14:00

answered Jan 21, 2014 at 13:12

Jānis Gruzis

9951 gold badge11 silver badges26 bronze badges

2 Comments

CStff Over a year ago

I love this way. $.ajax is more for low level.

Ian Gibbs Over a year ago

Link is dead, but the current version of jQuery provides an equivalent in any case, with some error handling niceness: see the API documentation

cmg_george · Accepted Answer · 2014-01-06 20:27:45Z

0

Also, is necesary can create a parameter and assign the value with JSON.stringify

....
data: "jsonString="+JSON.stringify(data),
...

answered Jan 6, 2014 at 20:27

cmg_george

3091 gold badge2 silver badges9 bronze badges

Comments

Paul Roub · Accepted Answer · 2017-05-29 01:26:13Z

0

I agree the data must be converted into a JSON string, not only to agree with the dataType and contentType setup but more importantly, to satisfy the server.

data: JSON.stringify(data),
dataType:'json'

edited May 29, 2017 at 1:26

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

answered May 28, 2017 at 23:19

Keaton Robinson

1

Comments

Dharman · Accepted Answer · 2025-05-21 22:47:53Z

There are many ways to send JSON data to the server

1. Using Ajax

var data = <?php echo json_encode($data) ?>;
var url  = '<?php echo $url ?>';
jQuery.ajax({
    type: "POST",
    url: url,
    data: JSON.stringify(data),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data){
        var jsonObj = jQuery.parseJSON(data);
        alert(jsonObj.encPassword);
    },
    failure: function(errorMsg) {
        alert(errorMsg);
    }
});

2. Using Curl

<?php
$content = json_encode($data);

$curl = curl_init($url);
curl_setopt($curl, CURLOPT_HEADER, false);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HTTPHEADER,
        array("Content-type: application/json"));
curl_setopt($curl, CURLOPT_POST, true);
curl_setopt($curl, CURLOPT_POSTFIELDS, $content);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); //curl error SSL certificate problem, verify that the CA cert is OK

$result     = curl_exec($curl);
$response   = json_decode($result);
var_dump($response);
curl_close($curl);
?>

3. Using Streams

<?php
$options = array(
    'http' => array(
        'method'  => 'POST',
        'content' => json_encode( $data ),
        'header'=>  "Content-Type: application/json\r\n" .
                    "Accept: application/json\r\n"
      )
);

$context     = stream_context_create($options);
$result      = file_get_contents($url, false, $context);
$response    = json_decode($result);
var_dump($response);

4. Raw HTTP Post

Using Zend Framework’s HTTP client: http://framework.zend.com/manual/en/zend.http.client.advanced.html#zend.http.client.raw_post_data

$json = json_encode($data);
$client = new Zend_Http_Client($url);
$client->setRawData($json, 'application/json')->request('POST');
var_dump($client->request()->getBody());

Bruce Dou · Accepted Answer · 2010-12-03 06:11:55Z

-3

dataType: 'json',

answered Dec 3, 2010 at 6:11

Bruce Dou

4,79110 gold badges41 silver badges57 bronze badges

2 Comments

Phrogz Over a year ago

To be more clear, this answer means that you have incorrectly capitalized your dataType value. String comparisons are case-sensitive, and jQuery only tests for "json", not "JSON".

Jonas Over a year ago

dataType is used for the data that is returned by the response and not for the posting.

Collectives™ on Stack Overflow

How can I send JSON data to server

7 Answers 7

4 Comments

1 Comment

2 Comments

Comments

Comments

1. Using Ajax

2. Using Curl

3. Using Streams

4. Raw HTTP Post

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

1 Comment

2 Comments

Comments

Comments

1. Using Ajax

2. Using Curl

3. Using Streams

4. Raw HTTP Post

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related