I am sending an error response to my jQuery.
However, I can not get the response text (in the example below this would be Gone to the beach)
The only thing jQuery says is ‘error’.
See this example for details:
php
<?
header('HTTP/1.1 500 Internal Server Error');
print "Gone to the beach"
?>
jQuery
$.ajax({
type: "post",
data: {id: 0},
cache: false,
url: "doIt.php",
dataType: "text",
error: function (request, error) {
console.log(arguments);
alert(" Can't do because: " + error);
},
success: function () {
alert(" Done ! ");
}
});
Now my result ist:
log:
[XMLHttpRequest readyState=4 status=500, "error", undefined]
alert:
Can’t do because: error
Any ideas?
robsch
9,2189 gold badges61 silver badges100 bronze badges
asked Oct 28, 2009 at 12:40
2
Try:
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
Matt
74.1k26 gold badges153 silver badges180 bronze badges
answered Oct 28, 2009 at 12:46
Alex BagnoliniAlex Bagnolini
21.9k3 gold badges41 silver badges41 bronze badges
9
For me, this simply works:
error: function(xhr, status, error) {
alert(xhr.responseText);
}
answered Aug 15, 2013 at 18:03
HaoQi LiHaoQi Li
11.9k14 gold badges58 silver badges77 bronze badges
Look at the responseText
property of the request parameter.
Dave Jarvis
30.3k40 gold badges178 silver badges313 bronze badges
answered Oct 28, 2009 at 12:43
tvanfossontvanfosson
523k99 gold badges697 silver badges794 bronze badges
5
As ultimately suggested by this other answer and it’s comments on this page:
error: function(xhr, status, error) {
var err = JSON.parse(xhr.responseText);
alert(err.Message);
}
answered May 5, 2016 at 13:00
Brad ParksBrad Parks
65.9k64 gold badges256 silver badges332 bronze badges
The best simple approach :
error: function (xhr) {
var err = JSON.parse(xhr.responseText);
alert(err.message);
}
answered Apr 19, 2018 at 18:07
Mazen EmbabyMazen Embaby
1,23311 silver badges18 bronze badges
This is what worked for me
function showErrorMessage(xhr, status, error) {
if (xhr.responseText != "") {
var jsonResponseText = $.parseJSON(xhr.responseText);
var jsonResponseStatus = '';
var message = '';
$.each(jsonResponseText, function(name, val) {
if (name == "ResponseStatus") {
jsonResponseStatus = $.parseJSON(JSON.stringify(val));
$.each(jsonResponseStatus, function(name2, val2) {
if (name2 == "Message") {
message = val2;
}
});
}
});
alert(message);
}
}
answered Jan 31, 2014 at 2:01
1
If you want to get Syntax Error with line number, use this
error: function(xhr, status, error) {
alert(error);
}
answered Oct 9, 2015 at 14:34
Karthikeyan PKarthikeyan P
1,1961 gold badge19 silver badges23 bronze badges
2
you can try it too:
$(document).ajaxError(
function (event, jqXHR, ajaxSettings, thrownError) {
alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');
});
answered Nov 24, 2011 at 23:17
0
This will allow you to see the whole response not just the «responseText» value
error: function(xhr, status, error) {
var acc = []
$.each(xhr, function(index, value) {
acc.push(index + ': ' + value);
});
alert(JSON.stringify(acc));
}
answered Mar 15, 2016 at 11:36
KareemKareem
5,01043 silver badges38 bronze badges
I used this, and it worked perfectly.
error: function(xhr, status, error){
alertify.error(JSON.parse(xhr.responseText).error);
}
Dharman♦
30.4k22 gold badges84 silver badges132 bronze badges
answered Aug 15, 2019 at 17:56
3
Try this to have complete error detail in console.
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log("Error Thrown: " + errorThrown);
console.log("Text Status: " + textStatus);
console.log("XMLHttpRequest: " + XMLHttpRequest);
console.warn(XMLHttpRequest.responseText)
}
answered Jul 16, 2022 at 20:50
If you’re not having a network error, and wanting to surface an error from the backend, for exmple insufficient privileges, server your response with a 200 and an error message. Then in your success handler check data.status == ‘error’
answered Oct 8, 2012 at 6:21
chovychovy
71.3k51 gold badges222 silver badges284 bronze badges
6
err.responseText
contain HTML tags you can get error message from these tags easily…
For example:
$(err.responseText)
// k.fn.init(12) [text, title, text, meta, text, style, text, span, text, font, text, //comment]
$.ajax({
async: bAsync,
type: 'POST',
url: pUrl,
contentType: 'application/json; charset=utf-8;',
dataType: 'json',
data: pData,
success: fn,
error: function(err) {
alert( $($(err.responseText)[1]).text() )
debugger;
}
});
Tyler2P
2,30425 gold badges22 silver badges31 bronze badges
answered Dec 21, 2021 at 13:22
1
Имеется ajax запрос на jQuery к php скрипту, который в случае, если сессия устарела, отдает:
header("HTTP/1.0 401 Unauthorized");
Как кроссбраузерно получить код ошибки (401)?
В функцию, вызывающуюся в случае ошибки ajax — error: function(request, status, error){...}
, — передается следующее:
— [object Object]
— error
— Unauthorized
-
Вопрос заданболее трёх лет назад
-
6657 просмотров
error: function(request, status, error) {
var statusCode = request.status; // вот он код ответа
}
Посмотрите в объекте, который у вас называется request
.
Вот тут есть список его свойств. Вам нужно status
.
Пригласить эксперта
error: function(request, status, error, html) {
var statusCode = request.status; // вот он код ответа
$("#id_дивА_где_нужно_вывести_результат").html("Error: "+statusCode);
-
Показать ещё
Загружается…
09 июн. 2023, в 01:21
10000 руб./за проект
09 июн. 2023, в 01:06
50000 руб./за проект
09 июн. 2023, в 00:36
1000 руб./за проект
Минуточку внимания
Description: Perform an asynchronous HTTP (Ajax) request.
The $.ajax()
function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly call this function, as several higher-level alternatives like $.get()
and .load()
are available and are easier to use. If less common options are required, though, $.ajax()
can be used more flexibly.
At its simplest, the $.ajax()
function can be called with no arguments:
Note: Default settings can be set globally by using the $.ajaxSetup()
function.
This example, using no options, loads the contents of the current page, but does nothing with the result. To use the result, you can implement one of the callback functions.
The jqXHR Object
The jQuery XMLHttpRequest (jqXHR) object returned by $.ajax()
as of jQuery 1.5 is a superset of the browser’s native XMLHttpRequest object. For example, it contains responseText
and responseXML
properties, as well as a getResponseHeader()
method. When the transport mechanism is something other than XMLHttpRequest (for example, a script tag for a JSONP request) the jqXHR
object simulates native XHR functionality where possible.
As of jQuery 1.5.1, the jqXHR
object also contains the overrideMimeType()
method (it was available in jQuery 1.4.x, as well, but was temporarily removed in jQuery 1.5). The .overrideMimeType()
method may be used in the beforeSend()
callback function, for example, to modify the response content-type header:
1 2 3 4 5 6 7 8 9 10 11 |
|
The jqXHR objects returned by $.ajax()
as of jQuery 1.5 implement the Promise interface, giving them all the properties, methods, and behavior of a Promise (see Deferred object for more information). These methods take one or more function arguments that are called when the $.ajax()
request terminates. This allows you to assign multiple callbacks on a single request, and even to assign callbacks after the request may have completed. (If the request is already complete, the callback is fired immediately.) Available Promise methods of the jqXHR object include:
-
jqXHR.done(function( data, textStatus, jqXHR ) {});
An alternative construct to the success callback option, refer to
deferred.done()
for implementation details. -
jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});
An alternative construct to the error callback option, the
.fail()
method replaces the deprecated.error()
method. Refer todeferred.fail()
for implementation details. -
jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { }); (added in jQuery 1.6)
An alternative construct to the complete callback option, the
.always()
method replaces the deprecated.complete()
method.In response to a successful request, the function’s arguments are the same as those of
.done()
: data, textStatus, and the jqXHR object. For failed requests the arguments are the same as those of.fail()
: the jqXHR object, textStatus, and errorThrown. Refer todeferred.always()
for implementation details. -
jqXHR.then(function( data, textStatus, jqXHR ) {}, function( jqXHR, textStatus, errorThrown ) {});
Incorporates the functionality of the
.done()
and.fail()
methods, allowing (as of jQuery 1.8) the underlying Promise to be manipulated. Refer todeferred.then()
for implementation details.
Deprecation Notice: The jqXHR.success()
, jqXHR.error()
, and jqXHR.complete()
callbacks are removed as of jQuery 3.0. You can use jqXHR.done()
, jqXHR.fail()
, and jqXHR.always()
instead.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
The this
reference within all callbacks is the object in the context
option passed to $.ajax
in the settings; if context
is not specified, this
is a reference to the Ajax settings themselves.
For backward compatibility with XMLHttpRequest
, a jqXHR
object will expose the following properties and methods:
-
readyState
-
responseXML
and/orresponseText
when the underlying request responded with xml and/or text, respectively -
status
-
statusText
(may be an empty string in HTTP/2) -
abort( [ statusText ] )
-
getAllResponseHeaders()
as a string -
getResponseHeader( name )
-
overrideMimeType( mimeType )
-
setRequestHeader( name, value )
which departs from the standard by replacing the old value with the new one rather than concatenating the new value to the old one -
statusCode( callbacksByStatusCode )
No onreadystatechange
mechanism is provided, however, since done
, fail
, always
, and statusCode
cover all conceivable requirements.
Callback Function Queues
The beforeSend
, error
, dataFilter
, success
and complete
options all accept callback functions that are invoked at the appropriate times.
As of jQuery 1.5, the fail
and done
, and, as of jQuery 1.6, always
callback hooks are first-in, first-out managed queues, allowing for more than one callback for each hook. See Deferred object methods, which are implemented internally for these $.ajax()
callback hooks.
The callback hooks provided by $.ajax()
are as follows:
-
beforeSend
callback option is invoked; it receives thejqXHR
object and thesettings
object as parameters. -
error
callback option is invoked, if the request fails. It receives thejqXHR
, a string indicating the error type, and an exception object if applicable. Some built-in errors will provide a string as the exception object: «abort», «timeout», «No Transport». -
dataFilter
callback option is invoked immediately upon successful receipt of response data. It receives the returned data and the value ofdataType
, and must return the (possibly altered) data to pass on tosuccess
. -
success
callback option is invoked, if the request succeeds. It receives the returned data, a string containing the success code, and thejqXHR
object. -
Promise callbacks —
.done()
,.fail()
,.always()
, and.then()
— are invoked, in the order they are registered. -
complete
callback option fires, when the request finishes, whether in failure or success. It receives thejqXHR
object, as well as a string containing the success or error code.
Data Types
Different types of response to $.ajax()
call are subjected to different kinds of pre-processing before being passed to the success handler. The type of pre-processing depends by default upon the Content-Type of the response, but can be set explicitly using the dataType
option. If the dataType
option is provided, the Content-Type header of the response will be disregarded.
The available data types are text
, html
, xml
, json
, jsonp
, and script
.
If text
or html
is specified, no pre-processing occurs. The data is simply passed on to the success handler, and made available through the responseText
property of the jqXHR
object.
If xml
is specified, the response is parsed using jQuery.parseXML
before being passed, as an XMLDocument
, to the success handler. The XML document is made available through the responseXML
property of the jqXHR
object.
If json
is specified, the response is parsed using jQuery.parseJSON
before being passed, as an object, to the success handler. The parsed JSON object is made available through the responseJSON
property of the jqXHR
object.
If script
is specified, $.ajax()
will execute the JavaScript that is received from the server before passing it on to the success handler as a string.
If jsonp
is specified, $.ajax()
will automatically append a query string parameter of (by default) callback=?
to the URL. The jsonp
and jsonpCallback
properties of the settings passed to $.ajax()
can be used to specify, respectively, the name of the query string parameter and the name of the JSONP callback function. The server should return valid JavaScript that passes the JSON response into the callback function. $.ajax()
will execute the returned JavaScript, calling the JSONP callback function, before passing the JSON object contained in the response to the $.ajax()
success handler.
For more information on JSONP, see the original post detailing its use.
Sending Data to the Server
By default, Ajax requests are sent using the GET HTTP method. If the POST method is required, the method can be specified by setting a value for the type
option. This option affects how the contents of the data
option are sent to the server. POST data will always be transmitted to the server using UTF-8 charset, per the W3C XMLHTTPRequest standard.
The data
option can contain either a query string of the form key1=value1&key2=value2
, or an object of the form {key1: 'value1', key2: 'value2'}
. If the latter form is used, the data is converted into a query string using jQuery.param()
before it is sent. This processing can be circumvented by setting processData
to false
. The processing might be undesirable if you wish to send an XML object to the server; in this case, change the contentType
option from application/x-www-form-urlencoded
to a more appropriate MIME type.
Advanced Options
The global
option prevents handlers registered for the ajaxSend
, ajaxError
, and similar events from firing when this request would trigger them. This can be useful to, for example, suppress a loading indicator that was implemented with an ajaxSend
handler if the requests are frequent and brief. With cross-domain script and JSONP requests, the global option is automatically set to false
. See the descriptions of these methods below for more details.
If the server performs HTTP authentication before providing a response, the user name and password pair can be sent via the username
and password
options.
Ajax requests are time-limited, so errors can be caught and handled to provide a better user experience. Request timeouts are usually either left at their default or set as a global default using $.ajaxSetup()
rather than being overridden for specific requests with the timeout
option.
By default, requests are always issued, but the browser may serve results out of its cache. To disallow use of the cached results, set cache
to false
. To cause the request to report failure if the asset has not been modified since the last request, set ifModified
to true
.
The scriptCharset
allows the character set to be explicitly specified for requests that use a <script>
tag (that is, a type of script
or jsonp
). This is useful if the script and host page have differing character sets.
The first letter in Ajax stands for «asynchronous,» meaning that the operation occurs in parallel and the order of completion is not guaranteed. The async
option to $.ajax()
defaults to true
, indicating that code execution can continue after the request is made. Setting this option to false
(and thus making the call no longer asynchronous) is strongly discouraged, as it can cause the browser to become unresponsive.
The $.ajax()
function returns the XMLHttpRequest
object that it creates. Normally jQuery handles the creation of this object internally, but a custom function for manufacturing one can be specified using the xhr
option. The returned object can generally be discarded, but does provide a lower-level interface for observing and manipulating the request. In particular, calling .abort()
on the object will halt the request before it completes.
Extending Ajax
As of jQuery 1.5, jQuery’s Ajax implementation includes prefilters, transports, and converters that allow you to extend Ajax with a great deal of flexibility.
Using Converters
$.ajax()
converters support mapping data types to other data types. If, however, you want to map a custom data type to a known type (e.g json
), you must add a correspondence between the response Content-Type and the actual data type using the contents
option:
1 2 3 4 5 6 7 8 9 10 11 |
|
This extra object is necessary because the response Content-Types and data types never have a strict one-to-one correspondence (hence the regular expression).
To convert from a supported type (e.g text
, json
) to a custom data type and back again, use another pass-through converter:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
The above now allows passing from text
to mycustomtype
and then mycustomtype
to json
.
Examples:
Save some data to the server and notify the user once it’s complete.
1 2 3 4 5 6 7 8 |
|
Retrieve the latest version of an HTML page.
1 2 3 4 5 6 7 |
|
Send an xml document as data to the server. By setting the processData
option to false
, the automatic conversion of data to strings is prevented.
1 2 3 4 5 6 7 8 |
|
Send an id as data to the server, save some data to the server, and notify the user once it’s complete. If the request fails, alert the user.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
Load and execute a JavaScript file.
In the following code, all I am trying to do is to get the HTTP response code from a jQuery.ajax call. Then, if the code is 301 (Moved Permanently), display the ‘Location’ response header:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jQuery 301 Trial</title>
<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
function get_resp_status(url) {
$.ajax({
url: url,
complete: function (jqxhr, txt_status) {
console.log ("Complete: [ " + txt_status + " ] " + jqxhr);
// if (response code is 301) {
console.log ("Location: " + jqxhr.getResponseHeader("Location"));
// }
}
});
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('a').mouseenter(
function () {
get_resp_status(this.href);
},
function () {
}
);
});
</script>
</head>
<body>
<a href="http://ow.ly/4etPl">Test 301 redirect</a>
<a href="http://cnn.com/not_found">Test 404 not found</a>
</body>
</html>
Can someone point out where I am going wrong? When I check the ‘jqxhr’ object in Firebug, I can’t find the status code, nor the ‘Location’ response header. I set the breakpoint on last line of ‘complete’.
Thanks much.
asked Mar 17, 2011 at 19:25
2
I see the status field on the jqXhr object, here is a fiddle with it working:
http://jsfiddle.net/magicaj/55HQq/3/
$.ajax({
//...
success: function(data, textStatus, xhr) {
console.log(xhr.status);
},
complete: function(xhr, textStatus) {
console.log(xhr.status);
}
});
answered Mar 17, 2011 at 19:30
Adam AyresAdam Ayres
8,7021 gold badge32 silver badges25 bronze badges
4
Came across this old thread searching for a similar solution myself and found the accepted answer to be using .complete()
method of jquery ajax
. I quote the notice on jquery website here:
The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.
To know the status code
of a ajax response, one can use the following code:
$.ajax( url [, settings ] )
.always(function (jqXHR) {
console.log(jqXHR.status);
});
Works similarily for .done()
and .fail()
answered Jul 2, 2013 at 21:39
faceface
1,50313 silver badges26 bronze badges
1
It is probably more idiomatic jQuery to use the statusCode property of the parameter object passed to the the $.ajax function:
$.ajax({
statusCode: {
500: function(xhr) {
if(window.console) console.log(xhr.responseText);
}
}
});
However, as Livingston Samuel said, it is not possible to catch 301 status codes in javascript.
answered Aug 2, 2012 at 13:16
rstackhouserstackhouse
2,19823 silver badges28 bronze badges
2
When your XHR request returns a Redirect response (HTTP Status 301, 302, 303, 307), the XMLHttpRequest
automatically follows the redirected URL and returns the status code of that URL.
You can get the non-redirecting status codes (200, 400, 500 etc) via the status
property of the xhr object.
So you cannot get the redirected location from the response header of a 301
, 302
, 303
or 307
request.
You might have to change your server logic to respond in a way that you can handle the redirect, rather than letting the browser do it. An example implementation.
answered Mar 17, 2011 at 19:38
You can check your respone content, just console.log it and you will see whitch property have a status code. If you do not understand jsons, please refer to the video: https://www.youtube.com/watch?v=Bv_5Zv5c-Ts
It explains very basic knowledge that let you feel more comfortable with javascript.
You can do it with shorter version of ajax request, please see code above:
$.get("example.url.com", function(data) {
console.log(data);
}).done(function() {
// TO DO ON DONE
}).fail(function(data, textStatus, xhr) {
//This shows status code eg. 403
console.log("error", data.status);
//This shows status message eg. Forbidden
console.log("STATUS: "+xhr);
}).always(function() {
//TO-DO after fail/done request.
console.log("ended");
});
Example console output:
error 403
STATUS: Forbidden
ended
answered Oct 26, 2016 at 8:03
1
NB: Using jQuery 3.4.1
$.ajax({
url: URL,
success: function(data, textStatus, jqXHR){
console.log(textStatus + ": " + jqXHR.status);
// do something with data
},
error: function(jqXHR, textStatus, errorThrown){
console.log(textStatus + ": " + jqXHR.status + " " + errorThrown);
}
});
answered Nov 12, 2019 at 20:29
jqxhr is a json object:
complete returns:
The jqXHR (in jQuery 1.4.x,
XMLHTTPRequest) object and a string
categorizing the status of the request
(«success», «notmodified», «error»,
«timeout», «abort», or «parsererror»).
see:
jQuery ajax
so you would do:
jqxhr.status
to get the status
answered Mar 17, 2011 at 19:32
NaftaliNaftali
145k39 gold badges243 silver badges302 bronze badges
AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.
Полное описание функции AJAX на jquery.com.
1
GET запрос
Запрос идет на index.php с параметром «text
» и значением «Текст
» через метод GET.
По сути это то же самое что перейти в браузере по адресу – http://site.com/index.php?text=Текст
В результате запроса index.php вернет строку «Данные приняты – Текст», которая будет выведена в сообщении alert.
$.ajax({
url: '/index.php', /* Куда пойдет запрос */
method: 'get', /* Метод передачи (post или get) */
dataType: 'html', /* Тип данных в ответе (xml, json, script, html). */
data: {text: 'Текст'}, /* Параметры передаваемые в запросе. */
success: function(data){ /* функция которая будет выполнена после успешного запроса. */
alert(data); /* В переменной data содержится ответ от index.php. */
}
});
JS
Код можно сократить используя функцию $.get
$.get('/index.php', {text: 'Текст'}, function(data){
alert(data);
});
JS
Код файла index.php
echo 'Данные приняты - ' . $_GET['text'];
PHP
GET запросы могут кэшироваться браузером или сервером, чтобы этого избежать нужно добавить в функцию параметр – cache: false
.
$.ajax({
url: '/index.php',
method: 'get',
cache: false
});
JS
2
POST запросы
$.ajax({
url: '/index.php',
method: 'post',
dataType: 'html',
data: {text: 'Текст'},
success: function(data){
alert(data);
}
});
JS
Или сокращенная версия – функция $.post
$.post('/index.php', {text: 'Текст'}, function(data){
alert(data);
});
JS
Код файла index.php
echo 'Данные приняты - ' . $_POST['text'];
PHP
POST запросы ни когда не кэшироваться.
3
Отправка формы через AJAX
При отправке формы применяется функция serialize()
, подробнее на jquery.com.
Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива – {login: 'ЗНАЧЕНИЯ_ПОЛЯ', password: 'ЗНАЧЕНИЯ_ПОЛЯ'}
.
Особенности serialize()
:
- Кнопки формы по которым был клик игнорируются, в результате функции их не будет.
- serialize можно применить только к тегу form и полям формы, т.е.
$('div.form_container').serialize();
– вернет пустой результат.
Пример отправки и обработки формы:
<div class="form_container">
<div id="message"></div>
<form id="form">
<input type="text" name="login">
<input type="text" name="password">
<input type="submit" name="send" value="Отправить">
</form>
</div>
<script>
$("#form").on("submit", function(){
$.ajax({
url: '/handler.php',
method: 'post',
dataType: 'html',
data: $(this).serialize(),
success: function(data){
$('#message').html(data);
}
});
});
</script>
HTML
Код файла handler.php
if (empty($_POST['login'])) {
echo 'Укажите логин';
} elseif (empty($_POST['password'])) {
echo 'Укажите пароль';
} else {
echo 'Авторизация...';
}
PHP
4
Работа с JSON
Идеальный вариант когда нужно работать с массивами данных.
$.ajax({
url: '/json.php',
method: 'get',
dataType: 'json',
success: function(data){
alert(data.text); /* выведет "Текст" */
alert(data.error); /* выведет "Ошибка" */
}
});
JS
Короткая версия
$.getJSON('/json.php', function(data) {
alert(data.text);
alert(data.error);
});
JS
$.getJSON
передает запрос только через GET.
Код файла json.php
header('Content-Type: application/json');
$result = array(
'text' => 'Текст',
'error' => 'Ошибка'
);
echo json_encode($result);
PHP
Возможные проблемы
При работе с JSON может всплыть одна ошибка – после запроса сервер отдал результат, все хорошо, но метод success
не срабатывает. Причина кроется в серверной части (PHP) т.к. перед данными могут появится управляющие символы, например:
Из-за них ответ считается не валидным и считается как ошибочный запрос.
В таких случаях помогает очистка буфера вывода ob_end_clean
(если он используется на сайте).
...
// Очистка буфера
ob_end_clean();
header('Content-Type: application/json');
echo json_encode($result, JSON_UNESCAPED_UNICODE);
exit();
PHP
5
Выполнение JS загруженного через AJAX
В JQuery реализована функция подгруздки кода JS через AJAX, после успешного запроса он будет сразу выполнен.
$.ajax({
method: 'get',
url: '/script.js',
dataType: "script"
});
JS
Или
$.getScript('/script.js');
JS
6
Дождаться выполнения AJAX запроса
По умолчанию в JQuery AJAX запросы выполняются асинхронно. Т.е. запрос не задерживает выполнение программы пока ждет результатов, а работает параллельно.
Простой пример:
var text = '';
$.ajax({
url: '/index.php',
method: 'get',
dataType: 'html',
success: function(data){
text = data;
}
});
alert(text); /* Переменная будет пустая. */
JS
Переменная text
будет пустая, а не как ожидается текст который вернул index.php
Чтобы включить синхронный режим нужно добавить параметр async: false
.
Соответственно синхронный запрос будет вешать прогрузку страницы если код выполняется в <head>
страницы.
var text = '';
$.ajax({
url: '/index.php',
method: 'get',
dataType: 'html',
async: false,
success: function(data){
text = data;
}
});
alert(text); /* В переменной будет результат из index.php. */
JS
7
Отправка HTTP заголовков
Через AJAX можно отправить заголовки HEAD, они указываются в параметре headers
.
$.ajax({
url: '/index.php',
method: 'get',
dataType: 'html',
headers: {'Token_value': 123},
success: function(data){
console.dir(data);
}
});
JS
В PHP они будут доступны в массиве $_SERVER
, ключ массива переводится в верхний регистр с приставкой HTTP_
, например:
<?php
echo $_SERVER['HTTP_TOKEN_VALUE']; // 123
PHP
8
Обработка ошибок
Через параметр error
задается callback-функция, которая будет вызвана в случаи если запрашиваемый ресурс отдал 404, 500 или другой код.
$.ajax({
url: '/index.php',
method: 'get',
dataType: 'json',
success: function(data){
console.dir(data);
},
error: function (jqXHR, exception) {
if (jqXHR.status === 0) {
alert('Not connect. Verify Network.');
} else if (jqXHR.status == 404) {
alert('Requested page not found (404).');
} else if (jqXHR.status == 500) {
alert('Internal Server Error (500).');
} else if (exception === 'parsererror') {
alert('Requested JSON parse failed.');
} else if (exception === 'timeout') {
alert('Time out error.');
} else if (exception === 'abort') {
alert('Ajax request aborted.');
} else {
alert('Uncaught Error. ' + jqXHR.responseText);
}
}
});
JS
Через $.ajaxSetup
можно задать обработчик ошибок для всех AJAX-запросов на сайте.
$.ajaxSetup({
error: function (jqXHR, exception) {
...
}
});
JS