AJAX and JSON error handling

Question

I have a form which submits data via AJAX to an external server.

The data which gets sent is then validated and if correct the user can then advance onto the next step of the form.

If the data is not valid, then the server returns an error which is outputted as a JSON object.

I can see the JSON object in FIDDLER.

My aim is to grab that JSON data and output it on the page and notify the user.

Ideally, i would do this as part of an error handler on the AJAX request(found below).

Is this achievable?

PS:

Unfortunately, I can't set up a demo because the link that the data is posted to is only available on my network.

It is also worth pointing out that the error that the back-end script outputs is actually stored in the link that the data is posted to.

AJAX REQUEST:

var setUpVrmData = function() {
    $("#getvrmdata").click(function () {


        var p_vrm = $('#p_vrm').val();

        $.ajax({
            dataType: "JSON",
            type: "POST",
            url: "http://217.35.33.226:8888/l4_site/public/api/v1/BC8F9D383321AACD64C4BD638897A/vdata",
            data: {
                vrm: p_vrm,
            },
            success: function(data) {

                //Empty the dropdown box first.

                $("#p_model").empty();

                appendString = "<option value='none'>-- Select your model --</option>";

                $.each(data['vehiclemodel'], function (k, v) {

                    // += concatenate the string

                    appendString += "<option value='" + k + "'>" + v + "</option>";

                });

                $("#p_model, #ent_mileage").show();

                $('.js-find-my-car').hide();

                $('.js-get-price').show();

                $("#p_model").append(appendString);

                $("#p_model").prop("disabled", false);

                $('#skey').val(data['skey']);

            },

            error: function() {

                console.log("We return error!");

            }
        });

    });

Where is stored the error in the data JSON object? And how do you want to print it? Alert, message on html... — Orelsanpls
– Orelsanpls, Commented Jun 22, 2014 at 13:31
The JSON object is stored in the URL that the data is sent to. I would like to grab that response from the server and output it as HTML/Text on the page. — Antonio Vasilev
– Antonio Vasilev, Commented Jun 22, 2014 at 13:43

Roman K. · Accepted Answer · 2014-06-22 14:36:42Z

The Error function will return an XHR object that you may be able to parse to get the message you want. I don't know what is serving the data so depending on how that's setup your mileage may vary. I've done this using PHP as well as C# and writing to Console, but in both cases I was able to control the returned data.

I used this article : http://encosia.com/use-jquery-to-catch-and-display-aspnet-ajax-service-errors/ as a starting point.

You'll need to update:

error: function() {
   console.log("We return error!");
        }

to

error: function(xhr, status, error) {
     console.log("We return error!");
        }

~~Set a break point there in Firebug to check if an XHR object is passed, if not you'll need to find a way to get it.~~. You mention you can see the JSON in fiddler, it should be available to you. If it is, just use the eval posed in the article and you should be okay. If not you'll have to go and figure out how to get it, depending on your platform difficulty will vary.

A few things to note, eval is messy and can get you into trouble. In the cases I've done this, I removed the eval in production.

Also as of jQuery 1.8 success error and complete are deprecated. Use done fail and always if you plan on updating jQuery in the future.

jQuery API reference, for reference.

http://api.jquery.com/jquery.ajax/

Collectives™ on Stack Overflow

AJAX and JSON error handling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related