jQuery posting JSON

Question

update: I would like to pass the var value to the server

hello, same old, same old ... :)

I have a form called <form id="testForm" action="javascript:test()"> and a code area called <code id="testArea"></code>

I am using this code to stringify and display the data in the code area:

var formData = form2object('testForm');
document.getElementById('testArea').innerHTML = JSON.stringify(formData, null, '\t');
var value = JSON.stringify(formData, null, '\t');

What I want is to send this data to a JSON file. I've been working on this project : http://ridegrab.com/profile_old/ and if you press Submit Query button you will see the head of the page populate.

Also I want use this piece of script to send data:

    function authenticate(userName, password) {
    $.ajax
    ({
        type: "POST",
        //the url where you want to sent the userName and password to
        url: 'username:password@link to the server/update',
        dataType: 'json',
        async: false,
        //json object to sent to the authentication url
        data: '{"userName": "' + userName + '", "password" : "' + password + '"}',
        success: function () {

        alert("Thanks!"); 
        }
    })
}

Again, all I want is to be able to send that JSON data to the server. My server is set up to update or POST the data in the right place.

i can't make it work :) i don't know how to put them together to send that data to the server... even if i replace `data` with `data: value,`...!!?? — Patrioticcow, Apr 06 '11 at 18:04
Firstly, are you certain it's not a connection issue? If you assign an `error` function, does it get called? If so, with what error? — Wiseguy, Apr 06 '11 at 18:19
Though it's over a year old, I'll answer @Patrioticcow's latest question about how to do that. You see the "success" option that you sent into the ajax method? Do the same thing with "error." As in "error: MyErrorHandlingFunction" or "error: function(error) { [Error handling code here] }" — vbullinger, Sep 25 '12 at 17:22

score 287 · Answer 1 · answered Nov 02 '12 at 23:41

287

You post JSON like this

$.ajax(url, {
    data : JSON.stringify(myJSObject),
    contentType : 'application/json',
    type : 'POST',
    ...

if you pass an object as settings.data jQuery will convert it to query parameters and by default send with the data type application/x-www-form-urlencoded; charset=UTF-8, probably not what you want

answered Nov 02 '12 at 23:41

teknopaul

6,139
2
27
20

@TimLovell-Smith won't make a difference as jQuery won't process a `data` string in any case – Phil Nov 17 '17 at 02:41

score 239 · Accepted Answer · edited Apr 26 '22 at 19:33

239

'data' should be a stringified JavaScript object:

data: JSON.stringify({ "userName": userName, "password" : password })

To send your formData, pass it to stringify:

data: JSON.stringify(formData)

Some servers also require the application/json content type header:

contentType: 'application/json'

There's also a more detailed answer to a similar question here: Jquery Ajax Posting JSON to webservice

edited Apr 26 '22 at 19:33

Ege Kaan Gürkan

2,923
2
11
23

answered Apr 06 '11 at 18:19

Kyle Wild

8,625
2
34
36

@tasos I think this is what you're after: http://stackoverflow.com/questions/5806971/read-associative-array-from-json-in-post – Kyle Wild Aug 13 '12 at 22:41
Echoing the incorrectness here; this will work OK for simple scenarios, but the url-encoded message can be very problematic, especially for arrays of stuff. – FMM Sep 17 '12 at 19:14
@FMM and Jonas N - Can you guys help me figure out how to update my answer for correctness? The examples in the jQuery docs (here: http://api.jquery.com/jQuery.post/) make it appear as though you can post either a JS object or a string, which led me to believe that jQuery would handle all of the necessary string serialization. – Kyle Wild Sep 17 '12 at 20:00
Patrioticcow said: "what if i want to send the json from var value" Unless the value is an array or an object this is not valid JSON. – andsens Nov 21 '12 at 14:42
1

Consider what happens when your data contains, for instance, a list of things: `{ foo: [1,2,3], bar: 'baz' }`. This will get form-encoded as `foo%5B%5D=1&foo%5B%5D=2&foo%5B%5D=3&bar=baz` (unescaped, it's `foo[]=1&foo[]=2&foo[]=3&bar=baz`). Likely not what you want server-side. – FMM Dec 05 '12 at 17:21
That won't quite work if you want to post JSON to a REST service, because jQuery will be posting the content as 'application/x-www-form-urlencoded; charset=UTF-8', while most REST services would be expecting 'application/json'; @teknopaul's answer would work much better in that case. – Haroldo_OK Aug 03 '17 at 11:34
A "stringified JavaScript object" is a plain **String** object – ccpizza May 04 '22 at 17:07

score 2 · Answer 3 · edited May 23 '17 at 12:34

2

In case you are sending this post request to a cross domain, you should check out this link.

https://stackoverflow.com/a/1320708/969984

Your server is not accepting the cross site post request. So the server configuration needs to be changed to allow cross site requests.

edited May 23 '17 at 12:34

Community

1
1

answered Jan 26 '16 at 01:41

nizam.sp

3,892
5
37
60

jQuery posting JSON

3 Answers3

Linked

Related