Check JSON string from AJAX response with jQuery

Question

I've using jQuery on my contact form for a web app we're building, I am getting a JSON response from the server which is:

{"success": true}

Here's my jQuery so far:

$('.contact-form').on('submit', function(e) {

            // Prevent submitting
            e.preventDefault();

            // Loading from data-* attr
            var $submit = $('#contact-submit');
            $submit.html($submit.data('text'));

            // Form data
            var form      = $(this);
            var post_url  = form.attr('action');
            var post_data = form.serialize();

            // Ajax call
            $.ajax({
                type    : 'POST',
                url     : post_url,
                data    : post_data,
                dataType: 'json',
                success: function(){

                },
                error: function(){

                }
            });

        });

I've hit a wall as I've never 'checked' against a JSON response before in the 'success' jQuery method, can anyone help on this? I am looking for a method of checking the response I'm getting, and if 'true' is presented, I will then show a 'Sent success' message.

You don't need to provide such a response - it is implicit in 200 OK HTTP response code :)) - different matter if you want to provide a richer or localised message, but still matter of discussion [I wouldn't either]. — moonwave99
– moonwave99, Commented Apr 18, 2013 at 9:14
FYI, {success: true} is invalid JSON. Keys must be strings! — Felix Kling
– Felix Kling, Commented Apr 18, 2013 at 9:17
@FelixKling - Chrome dev tools Network panel shows it as {success:true} but the 'actual' server sends {'success':true} but thanks for letting me know that! :) — Stephen Jenkins
– Stephen Jenkins, Commented Apr 18, 2013 at 9:22

Arun P Johny · Accepted Answer · 2013-04-18 09:06:04Z

7

The success callback will get the json object as the first parameter, you can use it in the callback as shown below

$.ajax({
    type : 'POST',
    url : post_url,
    data : post_data,
    dataType : 'json',
    success : function(data) {
        if(data.success){
            //do something if success
        }

    },
    error : function() {

    }
});

answered Apr 18, 2013 at 9:06

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 11:58:09Z

2

Why not reply the server with forexample HTTP code 200 (OK) or 201 (Created). Then in jQuery automatically fall in the success parameter is where everything went ok.

When server has a error, use for example code 422 (Unprocessable Entity), then jQuery ajax will automatically fall in error.

If this is impossible, just try and parse using JSON.parse(data) and walk down the tree. If parse fails, json is invalid.

Asuming Java Backend, your reply would look something like described here: How to send a HTTP error for a Java RESTful web service?; This is really depending on what classes / frameworks you are using. Set the HttpReponse status to 422 for example.

Your ajax call would look something like:

$.ajax({
    type    : 'POST',
    url     : post_url,
    data    : post_data,
    dataType: 'json',
    success: function(){
        // Everything went okay
    },
    statusCode: {
        422: function() {
            // Something went wrong (error in data serverside)
        }
    }
});

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Apr 18, 2013 at 9:07

ferdyh

1,4552 gold badges14 silver badges30 bronze badges

4 Comments

Stephen Jenkins Over a year ago

Status code is 200, that's an interesting way to do it. However, the other answer below worked nicely :)!

ferdyh Over a year ago

The idaea is, if your request is wrong (invalid fields or something), the whole request fails. You can then use the whole body to describe the error and it will fall through to the error field in your javascript (ajax) command. Switch on the error codes. The result is that your success stays nice and clean to only do stuff when your request is ok.

Stephen Jenkins Over a year ago

Thanks Ferdy, that sounds a more progressive way. Do you have any code snippets on how I could do this?

ferdyh Over a year ago

What language is your backend?

Grant Thomas · Accepted Answer · 2013-04-18 09:02:07Z

1

The following should work:

success: function(result) {
  var thing = $.parseJSON(result.d);
  if (thing.success) {

  }
}

answered Apr 18, 2013 at 9:02

Grant Thomas

45.1k10 gold badges88 silver badges129 bronze badges

Collectives™ on Stack Overflow

Check JSON string from AJAX response with jQuery

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related