36

I'm a jQuery beginner. I'm trying to code a very simple using $.get(). The official documentation says:

If a request with jQuery.get() returns an error code, it will fail silently unless the script has also called the global .ajaxError() method or.

As of jQuery 1.5, the .error() method of the jqXHR object returned by jQuery.get() is also available for error handling.

So, if all goes well, my callback function for success will be called. However, if the request fails, I would like to get the HTTP code :404, 502, etc and formulate a meaningful error message for the user.

However, since this is an asynchronous call I can imagine that I might have several outstanding. How would .ajaxError() know which request it corresponds to? Maybe it would be better to use the .error() method of the jqXHR object returned by jQuery.get()?

I am seeking an extremely simple code example. Perhaps the success routine calls Alert("Page found") and the failure routine checks for 404 and does an Alert("Page not found").

Update

The following page is extremely helpful: http://api.jquery.com/jQuery.get/

Improve this question

3 Answers 3

Reset to default
67

You're right that you can use jQuery 1.5's new jqXHR to assign error handlers to $.get() requests. This is how you can do it:

var request = $.get('/path/to/resource.ext'); request.success(function(result) { console.log(result); }); request.error(function(jqXHR, textStatus, errorThrown) { if (textStatus == 'timeout') console.log('The server is not responding'); if (textStatus == 'error') console.log(errorThrown); // Etc });

You can also chain handlers directly onto the call:

$.get('/path/to/resource.ext') .success(function(result) { }) .error(function(jqXHR, textStatus, errorThrown) { });

I prefer the former to keep the code less tangled, but both are equivalent.

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

6 Comments

+1 Thanks for the help. But what if I have several requests active in parallel? How can I tell which error belongs to which?
The jqXHR object passed into the error handler will contain information about the original request that raised the error. Depending on your server-side implementation, errorThrown will also contain more detail about what went wrong.
If you pass a JavaScript object as $.get()'s second parameter, it will URL encode that data and append it to the URL. For your example, you'd use $.get('/path/to/resource.ext', { search: 'pizza' }); to add the parameter.
jQuery now uses .done and .fail instead of .success and .error which have both been deprecated but will probably work for some time. api.jquery.com/jQuery.get
@Jazzepi is right, but there's also this alternative stackoverflow.com/questions/41169385/…
|
37

As of jQuery 3.0 .success() and .error() are deprecated.
You can use .done() and .fail() instead

$.get( url ) .done(function( data, textStatus, jqXHR ) { console.log(data); }) .fail(function( jqXHR, textStatus, errorThrown ) { console.log(jqXHR); console.log(textStatus); console.log(errorThrown ); });

Source: https://api.jquery.com/jQuery.ajax/

Improve this answer

Comments

18

.get() is just a synonym for .ajax() with a number of options pre-set. Use ajax() to get the full range of options, including the error callback.

$.ajax({ type: "GET", url: "test.htm", error: function(xhr, statusText) { alert("Error: "+statusText); }, success: function(msg){ alert( "Success: " + msg ); } } );
Improve this answer

3 Comments

+1That shows what a n00b I am that I did not know that. I'll try it out and get back to you. Thanks.
Btw, how do I pass CGI parameters to the URL. E.g google.com?serach="pizza"
Ajax requests that fail in transport will fail silently (error only gets called if there's an error parsing your request, but it was properly received)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.