Jquery ajax получить код ошибки

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's user avatar

robsch

9,2189 gold badges61 silver badges100 bronze badges

asked Oct 28, 2009 at 12:40

jantimon's user avatar

2

Try:

error: function(xhr, status, error) {
  var err = eval("(" + xhr.responseText + ")");
  alert(err.Message);
}

Matt's user avatar

Matt

74.1k26 gold badges153 silver badges180 bronze badges

answered Oct 28, 2009 at 12:46

Alex Bagnolini's user avatar

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 Li's user avatar

HaoQi LiHaoQi Li

11.9k14 gold badges58 silver badges77 bronze badges

Look at the responseText property of the request parameter.

Dave Jarvis's user avatar

Dave Jarvis

30.3k40 gold badges178 silver badges313 bronze badges

answered Oct 28, 2009 at 12:43

tvanfosson's user avatar

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);
}

Community's user avatar

answered May 5, 2016 at 13:00

Brad Parks's user avatar

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 Embaby's user avatar

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

user3255682's user avatar

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 P's user avatar

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

85tisgirjetuji8's user avatar

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

Kareem's user avatar

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's user avatar

Dharman

30.4k22 gold badges84 silver badges132 bronze badges

answered Aug 15, 2019 at 17:56

Juan Silupú Maza's user avatar

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)
               }

Carn's user avatar

answered Jul 16, 2022 at 20:50

Ateeq Rafeeq's user avatar

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

chovy's user avatar

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's user avatar

Tyler2P

2,30425 gold badges22 silver badges31 bronze badges

answered Dec 21, 2021 at 13:22

MUHAMMAD NOMAN KHALID's user avatar

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

url: "https://fiddle.jshell.net/favicon.png",

beforeSend: function( xhr ) {

xhr.overrideMimeType( "text/plain; charset=x-user-defined" );

if ( console && console.log ) {

console.log( "Sample of data:", data.slice( 0, 100 ) );

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 to deferred.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 to deferred.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 to deferred.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

// Assign handlers immediately after making the request,

// and remember the jqXHR object for this request

var jqxhr = $.ajax( "example.php" )

// Perform other work here ...

// Set another completion function for the request above

jqxhr.always(function() {

alert( "second complete" );

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/or responseText 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:

  1. beforeSend callback option is invoked; it receives the jqXHR object and the settings object as parameters.
  2. error callback option is invoked, if the request fails. It receives the jqXHR, 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».
  3. dataFilter callback option is invoked immediately upon successful receipt of response data. It receives the returned data and the value of dataType, and must return the (possibly altered) data to pass on to success.
  4. success callback option is invoked, if the request succeeds. It receives the returned data, a string containing the success code, and the jqXHR object.
  5. Promise callbacks.done(), .fail(), .always(), and .then() — are invoked, in the order they are registered.
  6. complete callback option fires, when the request finishes, whether in failure or success. It receives the jqXHR 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

mycustomtype: /mycustomtype/

"mycustomtype json": function( result ) {

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

mycustomtype: /mycustomtype/

"text mycustomtype": true,

"mycustomtype json": function( result ) {

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

data: { name: "John", location: "Boston" }

alert( "Data Saved: " + msg );

Retrieve the latest version of an HTML page.

1

2

3

4

5

6

7

$( "#results" ).append( html );

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

var xmlDocument = [create xml document];

var xmlRequest = $.ajax({

xmlRequest.done( handleResponse );

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

var menuId = $( "ul.nav" ).first().attr( "id" );

request.done(function( msg ) {

request.fail(function( jqXHR, textStatus ) {

alert( "Request failed: " + textStatus );

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

Mahesh's user avatar

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 Ayres's user avatar

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()

Oliver Tappin's user avatar

answered Jul 2, 2013 at 21:39

face's user avatar

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.

Community's user avatar

answered Aug 2, 2012 at 13:16

rstackhouse's user avatar

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.

rstackhouse's user avatar

answered Mar 17, 2011 at 19:38

Livingston Samuel's user avatar

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

Przemysław Sienkiewicz's user avatar

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

SurfingSanta's user avatar

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

Naftali's user avatar

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) т.к. перед данными могут появится управляющие символы, например:

Управляющие символы в ответе JSON

Из-за них ответ считается не валидным и считается как ошибочный запрос.

В таких случаях помогает очистка буфера вывода 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

Понравилась статья? Поделить с друзьями:
  • Jeep grand cherokee wj ошибки климата
  • Joomla ошибки при установки шаблона
  • Joomla ошибка подключения к smtp
  • Jeep grand cherokee wj ошибка p0158
  • Joomla ошибка загрузки пакета обновления