how to pass json in jQuery $.ajax method?

Question

I have following json data which I want to pass it to server using $.ajax. I tried many times, nothing returned, which is suppose to return another json object. Please help

$(function() {
        var parameters = {
            "firstName": "Saumil",
            "lastName": "Jhaveri",
            "email": "[email protected]",
            "address": "650+Townsend+St,+St.+325",
            "city": "San+Francisco",
            "state": "California",
            "zipCode": "94103",
            "country": "United+States",
            "phone": "312&375&1884",
            "industry": "Accounting",
            "organization": "Citrix",
            "jobTitle": "Software+Engineer",
            "purchasingTimeFrame": "1&3+months",
            "roleInPurchaseProcess": "Decision+Maker",
            "numberOfEmployees": "1&20",
            "questionsAndComments": "No+Comments!",
            "responses": [{
                "questionKey": 152,
                "responseText": "Fantastic!"
            }, {
                "questionKey": 151,
                "answerKey": 152
             }]
            };
          var jsonData=$.toJSON(parameters);  
    $.ajax({
        type: "POST",
        url: "https://api.citrixonline.com/G2W/rest/organizers/2934047/webinars/439546160/registrants?oauth_token=57f9454c6aecec65adef1ca66cbfde02",
        data: jsonData,
            contentType: "application/json",
            dataType: "json",
            success: function(data) {
                $('#key').html(data.registrantKey);
                $('#url').html(data.joinUrl);
            }
        });
    });

Here's the div that I want to display returned data.

<div id="key"></div>
<div id="url"></div>

I have no control on the url that I send data to, but it is says I'll receive response something as follows:

     HTTP/1.1 201 OK
 Content-Type: application/json
 {
 "registrantKey":5678,
 "joinUrl":"https://www1.gotomeeting.com/join/123456789/5678"
 }

You said that nothing is returned, but you haven't told us what you've done to make sure that the server-side code correctly reads your JSON. — Vivian River
– Vivian River, Commented Feb 7, 2012 at 20:45
Is $.toJSON a plugin you are including? Because jQuery does not have that method. — Jasper
– Jasper, Commented Feb 7, 2012 at 20:47
@Jasper, then how to convert it into json? Shoud I use that parameters directly in $.ajax()? — Steven Zack
– Steven Zack, Commented Feb 7, 2012 at 20:49
Well you can use $.toJSON if you include the plugin after you include the jQuery core and before you try to run $.toJSON: code.google.com/p/jquery-json. JSON.stringify is the browser implementation but it's not supported in all browsers: developer.mozilla.org/en/JavaScript/Reference/Global_Objects/… — Jasper
– Jasper, Commented Feb 7, 2012 at 20:50

Jasper · Accepted Answer · 2012-02-07 20:49:26Z

1

The $.toJSON method will return a string formatted as JSON. This string can be the value of a POSt variable if you give it a key:

$.ajax({
    type: "POST",
    url: "https://api.citrixonline.com/G2W/rest/organizers/2934047/webinars/439546160/registrants?oauth_token=57f9454c6aecec65adef1ca66cbfde02",
    data: 'jsonData=' + jsonData,
        contentType: "application/json",
        dataType: "json",
        success: function(data) {
            $('#key').html(data.registrantKey);
            $('#url').html(data.joinUrl);
        }
    });

I'm assuming that the $.toJSON method you are using is part of this plugin: http://code.google.com/p/jquery-json/

answered Feb 7, 2012 at 20:49

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

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

4 Comments

Steven Zack Over a year ago

I did as you suggested. I also added an alert("test") in success function, but no message pop up.

Jasper Over a year ago

Add error reporting to your ajax call with an error callback: api.jquery.com/jquery.ajax. Then you will know why the JS is failing. I have no idea what your server-side code is doing so I can't help much more.

Steven Zack Over a year ago

You are right. I added error:function(result){alert(result.ErrorMessage);} It returns undefined. Do you have an idea?

Jasper Over a year ago

You will get more meaningful information using this:

error : function (jqXHR, textStatus, errorThrown) { console.log(jqXHR); console.log(textStatus); console.log(errorThrown);}

. The important part is that the error function is passed three arguments, the second and third ones will help you troubleshoot your problem.

Collectives™ on Stack Overflow

how to pass json in jQuery $.ajax method?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related