При отправке ajax запроса произошла ошибка funpay

jQuery.ajax()

При выполнении ajax-запроса, в заголовках (header) указываются допустимые типы содержимого, ожидаемого от сервера. Значения этих типов будут взяты из параметра accepts . Если требуется его изменить, лучше сделать это с помощью метода $.ajaxSetup().

async

По умолчанию: true

По умолчанию, все запросы отсылаются асинхронно (значение данного параметра true). Если же вам нужны синхронные запросы, то параметру async выставите значение false. Кроссдоменные запросы и dataType: «jsonp» не выполняются в синхронном режиме. Учтите, синхронные запросы могут на время выполнения запроса заблокировать браузер.

beforeSend(jqXHR jqXHR , объект settings)

Функция, которая будет вызвана непосредственно перед отправкой ajax-запроса на сервер. Она может быть использована для модификации jqXHR-объекта (в ранних версиях, до jQuery 1.4.x использовался XMLHttpRequest). Так же может использоваться для изменения заголовков (headers) и т.д. Объект типа jqXHR и объект настроек, передаются в качестве аргументов.

КАК ОБОЙТИ БЛОКИРОВКУ НА САЙТЕ FUNPAY ? ПОЛУЧИЛ БАН НА ФАНПЕЙ, ЧТО ДЕЛАТЬ ? РАЗБАН ФП АККАУНТА !

Возврат значения false в функции beforeSend вызовет отмену ajax-запроса. Начиная с jQuery 1.5, beforeSend сработает вне зависимости от типа запроса.

cache

По умолчанию: true, false для типов данных ‘script’ and ‘jsonp’

Если false, запрашиваемая страница не будет кэшироваться браузером.

complete( jqXHR jqXHR, строка textStatus)

Функция, которая будет вызвана после завершения ajax запроса (срабатывает после функций-обработчиков success и error). Функция принимает два аргумента: объект типа jqXHR (в ранних версиях, до jQuery 1.4.x использовался XMLHttpRequest) и строку, характеризующую статус запроса («success», «notmodified», «error», «timeout», «abort», или «parsererror»). Начиная с jQuery 1.5, complete может принимать массив функций.

contents

Параметр задается в формате и определяет, как jQuery будет разбирать ответ от сервера, в зависимости от его типа. (добалено в версии 1.5)

contentType

По умолчанию: ‘application/x-www-form-urlencoded; charset=UTF-8’

При отправке Ajax запроса, данные передаются в том виде, в котором указаны в данном параметре. По умолчанию используется ‘application/x-www-form-urlencoded; charset=UTF-8’. Если задать значение самим, то оно будет отправлено на сервер. Если кодировка не указана, то по умолчанию будет использоваться кодировка выставленная на сервере.

context

Объект, который станет контекстом после выполнения запроса (передаваемое значение в переменную this). Например, если указать в качестве контекста DOM-элемент, то все обработчики ajax-запроса тоже будут выполняться в контексте данного DOM-элемента. В данном примере ключевое слово this будет содержать document.body:

$.ajax( < url: «test.html», context: document.body, success: function()< $(this).addClass(«done»); >>);

converters

Определяет, с помощью каких функций будет производиться конвертация значений из одного типа, в другой. (добалено в версии 1.5)

😒 Бан на FunPay💩

crossDomain

По умолчанию: false для одного и того же домена, true для кроссбоменных запросов.

Если вы хотите, чтобы выполнить кросс-доменный запрос (например, JSONP) на том же домене, выставите true в настройке crossDomain. Это позволяет, например, сделать серверные перенаправление на другой домен. (добалено в версии 1.5)

data

Данные, которые будут переданы на сервер. Если данные не являются строкой, то они конвертируются в строку запроса. Для запросов типа GET данные прикрепляются к URL. Объект должен состоять из пар ключ/значение. Если в значении массив, то jQuery упорядочивает значения в зависимости от настройки traditional.

По умолчанию, например, превращается в foo=bar2.

dataFilter( строка data, строка type)

Функция, с помощью которой будут обрабатываться сырые данные типа XMLHttpRequest, полученные от сервера. Ваша функция должна играть роль фильтра и возвращать очищенную строку. В функцию передаются два параметра: полученные данные и значение параметра dataType.

dataType

По умолчанию: автоматически определяемая строка (xml, json, script, или html)

Тип данных, ожидаемых от сервера. Если опция не определена, то jQuery попытается определить тип, основываясь на MIME-типе ответа.

error( jqXHR jqXHR, строка textStatus, строка errorThrown)

Функция, исполняемая в случае неудачного запроса. Принимает 3 аргумента: объект jqXHR (в прошлом XMLHttpRequest), строку с описанием ошибки, а так же строку исключения, если оно было выбрашено. Второй аргумент может содержать следующие значения: null, «timeout», «error», «abort», и «parsererror». В случае если происходит HTTP ошибка, то в третий аргумент будет записан её текстовой статус.

К примеру, «Not Found» или «Internal Server Error.». Начиная с jQuery 1.5, вместо одной функции, этот параметр может принимать массив функций. Событие error не происходит при dataType равному script или JSONP.

global

По умолчанию: true.

Вызывать или нет глобальные обработчики событий Ajax для этого запроса (например ajaxStart или ajaxStop).

headers

По умолчанию: <>

Здесь можно указать дополнительные заголовки запроса (header). Значения этой настройки будут введены до вызова функции beforeSend, в которой могут быть внесены окончательные изменения в заголовки. (добалено в версии 1.5)

ifModified

По умолчанию: false

Запрос будет считаться успешным только в случае, если данные ответа изменились со времени последнего запроса. Проверка осуществляется по заголовку Last-Modified. По умолчани, данная опция отключена. В jQuery 1.4 так же проверяется значение ‘etag’, для отслеживания факта изменения данных.

isLocal

По умолчанию: в зависимости от текущей локации

Параметр определяет, запущена ли веб-страница локально (например по протоколу file, *-extension, и widget) или нет (например по протоколу http). Данную настройку лучше менять с помощью метода $.ajaxSetup(). (добалено в версии 1.5)

jsonp

Определяет имя параметра, который добавляется в url JSONP-запроса(по умолчанию, используется «callback»). К примеру настройка преобразуется в часть url строки ‘onJSONPLoad=?’. Начиная с версии 1.5, указание в этом параметре false предотвращает добавление в url дополнительного параметра. В этом случае, необходимо установить значение настройки jsonpCallback. Например так: .

jsonpCallback

Функция, которая будет вызвана при ответе сервера на запрос типа JSONP. По умолчанию, jQuery генерирует произвольное уникальное имя этой функции, что более предпочтительно. Если вы хотите использовать кэширование GET запросов, то вписывайте название функции сами. Начиная с версии 1.5 можно указать функцию, для того, чтобы обработать ответ сервера самостоятельно.

mimeType

Здесь можно указать тип данных, в котором ожидается ответ от сервера вместо XHR. (добалено в версии 1.5.1)

password

Пароль, который будет использоваться в ответ на запрос проверки подлинности доступа HTTP (если это требуется)

username

Имя пользователя, которое будет использоваться в ответ на запрос проверки подлинности доступа HTTP (если это требуется)

processData

По умолчанию: true;

По умолчанию передаваемые на сервер данные преобразуются из объекта в строку запроса и отправляются как «application/x-www-form-urlencoded». Если вам необходимо отправить DOM-документ или иные данные, которые нельзя подвергать конвертированию установите опцию processData в false.

scriptCharset

Применяется только для Ajax GET-запросов типов ‘JSONP’ и ‘script ‘. Если сервер на стороннем домене использует кодировку, отличную от вашей, необходимо указать кодировку стороннего сервера.

statusCode

Набор пар, в котором кодам выполнения запроса сопоставляются функции, которые при этом будет вызваны. Например, для кода 404 (страницы не существуют) можно сделать вывод сообщения на экран:

$.ajax( < statusCode:< 404:function()< alert(‘Страница не найдена’); >> >);

Если запрос прошёл успешно, то в качестве параметра, анонимная функция будет принимать те же параметры, что и при success. При ошибке, будет принимать то же самое что и при функции-обработчике error. (добалено в версии 1.5)

success( объект data, строка textStatus, объект jqXHR)

Функция, которая будет вызвана в случае успешного завершения запроса. Принимает 3 аргумента — данные (data), присланные сервером и прошедшие предварительную обработку; строка со статусом выполнения (textStatus); объект jqXHR (в версиях до 1.5 вместо jqXHR используетсяXMLHttpRequest). С версии jQuery 1.5, вместо одной функции, этот параметр может принимать массив функций.

timeout

Время ожидания ответа от сервера в миллисекундах. Переписывает глобальную настройку этого же параметра в $.ajaxSetup(). Если это время будет превышено, запрос будет завершен с ошибкой и произойдет событие error, которое будет иметь статус «timeout».

traditional

По умолчанию: false

Установите значение этого параметра в true, для того, чтобы использовать традиционный стиль сериализации.

type

По умолчанию: GET

Определяет тип запроса GET или POST. Можно также использовать другие HTTP-запросы (такие как PUT или DELETE), но следует помнить, что они поддерживаются не всеми бразерами.

url

По умолчанию: текущая страница.

Страница, накоторую будет отправлен запрос.

xhr

По умолчанию ActiveXObject в IE, XMLHttpRequest в других браузерах.

Callback-функция, для создания объекта XMLHttpRequest. Создав свою функцию, вы берёте на себя всю ответственность за формирование объекта.

xhrFields

Объект вида для изменения значений соответствующих полей объекта XMLHttpRequest.

$.ajax( < url: a_cross_domain_url, xhrFields: < withCredentials: true >>);

(добалено в версии 1.5.1)

Примеры

Сохранить данные на сервере и оповестить об этом пользователя.

$.ajax( < type: «POST», url: «some.php», data: < name: «John», location: «Boston» >>).done(function( msg ) < alert( «Data Saved: » + msg ); >);

Получить последнюю версию HTML страницы

$.ajax(< url: «test.html», cache: false >).done(function( html ) < $(«#results»).append(html); >);

Передаём в качестве данных XML документ. Отключаем автоматическую конвертацию данных в обычную строку, задав настройке processData значение false :

var xmlDocument = [create xml document]; var xmlRequest = $.ajax(< url: «page.php», processData: false, data: xmlDocument >); xmlRequest.done(handleResponse);

Отправить на сервер значение ID. Сохранить данные, оповестить пользователя. Если запрос не прошёл, сообщить об этом пользователю.

var menuId = $(«ul.nav»).first().attr(«id»); var request = $.ajax(< url: «script.php», type: «POST», data: , dataType: «html» >); request.done(function(msg) < $(«#log»).html( msg ); >); request.fail(function(jqXHR, textStatus) < alert( «Request failed: » + textStatus ); >);

Загрузить и выполнить файл JavaScript:

$.ajax(< type: «GET», url: «test.js», dataType: «script» >);

Источник: ruseller.com

Я хотел бы поймать ошибку и показать соответствующее сообщение, если запрос Ajax терпит неудачу.

мой код выглядит следующим образом, но мне не удалось поймать неудачный запрос Ajax.

function getAjaxData(id) < $.post(«status.ajax.php», , function(data)< var tab1; if (data.length>0) < tab1 = data; >else < tab1 = «Error in Ajax»; >return tab1; >); >

я узнал, что» ошибка в Ajax » никогда не выполняется, когда запрос Ajax не удался.

Как я могу обработать ошибку Ajax и показать соответствующее сообщение, если это не удастся?

автор: Peter Mortensen

6 ответов

начиная с jQuery 1.5 вы можете использовать механизм отложенных объектов:

$.post(‘some.php’, ) .done(function(msg)< >) .fail(function(xhr, status, error) < // error handling >);

другой способ-использовать .ajax :

$.ajax(< type: «POST», url: «some.php», data: «name=John, success: function(msg)< alert( «Data Saved: » + msg ); >, error: function(XMLHttpRequest, textStatus, errorThrown) < alert(«some error»); >>);
автор: choise

jQuery 1.5 добавил отложенные объекты, которые прекрасно справляются с этим. Просто позвоните $.post и прикрепите любые обработчики, которые вы хотите после вызова. Отложенные объекты даже позволяют присоединить несколько обработчиков успеха и ошибок.

$.post(‘status.ajax.php’, ) .done( function(msg) < . >) .fail( function(xhr, textStatus, errorThrown) < alert(xhr.responseText); >);

до jQuery 1.8 функция done называлась success и fail называлась error .

автор: Michael Venable

$.ajax(< type: ‘POST’, url: ‘status.ajax.php’, data: < deviceId: id >, success: function(data)< // your code from above >, error: function(xhr, textStatus, error) < console.log(xhr.statusText); console.log(textStatus); console.log(error); >>);
автор: jAndy
$.post(‘someUri’, < >, function(data)< doSomeStuff >) .fail(function(error) < alert(error.responseJSON) >);
автор: marknery

всякий раз, когда запрос Ajax завершается с ошибкой jQuery запускает событие ajaxError. Все обработчики которые были зарегистрированы в .метод ajaxError() выполняется при эта пора.

$(‘.log’).ajaxError(function() < $(this).text(‘Triggered ajaxError handler.’); >);

Я бы предложил чтение ajaxError документация. Он делает больше чем просто use-case продемонстрированный выше-главным образом свое обратный вызов принимает ряд параметров:

$(‘.log’).ajaxError(function(e, xhr, settings, exception) < if (settings.url == ‘ajax/missing.html’) < $(this).text(‘Triggered ajaxError handler.’); >>);
автор: karim79

я исправил эту проблему путем объявления datatype: ‘json’ в моем вызове jQuery ajax.

Источник: askdev.ru

AJAX запрос. Почему срабатывает функция ошибки?

Почему не срабатывает Ajax запрос?
Добрый день! Не пойму почему не срабатыват запрос. <form method=»POST».

Не срабатывает ajax запрос
По нажатию на кнопку нужно обновить содержимое блока: <div onClick=»taskreload();.

не срабатывает Ajax запрос
Пытаюсь сделать следущее: с помощю PHP взять некую информацию с сайта. Т.е. есть поле ввода, ввожу.

Ajax: почему не срабатывает состояние success?
Приветствую всех! Помогите понять почему не срабатывает состояние success! Есть код //.

810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2

ну так может в самом articlejs.php какие-то ошибки? в результате ответ не приходит от сервера и ajax обрбатывает запрос как ошибку.

Регистрация: 04.06.2013
Сообщений: 1,532

ну так может в самом articlejs.php какие-то ошибки? в результате ответ не приходит от сервера и ajax обрбатывает запрос как ошибку.

Сервер отвечает

echo «»rez»: «Успешно»>»;
810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2

посмотрите через хром ответ сервера: правой клавишей «просмотреть код элемента» и далее вкладка Network, после это сделайте действие которое вызывает ваш ajax запрос

и если вы отправляете в формате json, то надо получать его так:

alert(data.rez);
Регистрация: 04.06.2013
Сообщений: 1,532

посмотрите через хром ответ сервера: правой клавишей «просмотреть код элемента» и далее вкладка Network, после это сделайте действие которое вызывает ваш ajax запрос

Что странно что type text/html

810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2
ну все пришло. значит должно работать. Что пишется в алерте?

Регистрация: 04.06.2013
Сообщений: 1,532

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
$(‘#button_save’).click(function() { var text = $(‘#text’).

val(); $.ajax({type:»POST», dataType:»json», url:»articlejs.php», data:{text:text,a:a}, success: function (data) { $(‘#text’).val(»); alert(data.

rez); }, error: function(XMLHttpRequest, textStatus, errorThrown) { $(‘#text’).val(‘ERROR’+ XMLHttpRequest +» «+ errorThrown) alert(textStatus);}, }); });
сделал как Вы сказали но функция ошибки по прежнему срабатывает

810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2

Что пишется в алерте?

и также посмотрите через браузер что пришло от сервера (кликните по articlejs.php)

Регистрация: 04.06.2013
Сообщений: 1,532
Что пишется в алерте?
Алерт «ошибки»
и также посмотрите через браузер что пришло от сервера (кликните по articlejs.php)
901 / 833 / 198
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
$(‘#button_save’).click(function() { var text = $(‘#text’).val(); $.ajax({type:»POST», dataType:»json», url:»articlejs.php», data:{text:text,a:a}, success: function (data) { $(‘#text’).val(»); alert(data.rez); }, error: function(XMLHttpRequest, textStatus, errorThrown) { $(‘#text’).val(‘ERROR’+ XMLHttpRequest +» «+ errorThrown) alert(textStatus);}, }); });
В строке 5 — что за а? Выдаёт синтаксическую ошибку и не число и не строка
$(‘#text’).val(‘ERROR’+ XMLHttpRequest +» «+ errorThrown)

XMLHttpRequest — это объект, зачем помещать его val ?

1 2 3
$res[‘rez’]=»успешно»; echo json_encode($res);?>
Всё работает.
Регистрация: 04.06.2013
Сообщений: 1,532
В строке 5 — что за а?
var a = location.search;
XMLHttpRequest — это объект, зачем помещать его val ?
Просто такЯ же только учусь
901 / 833 / 198
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
Почему не делаете как Вам говорят, а упорно гнёте свою линию
Делайте вот так
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
html> head> title>ajaxError/title> meta http-equiv=»Content-Type» content=»text/html; charset=windows-utf-8″ /> script src=»http://code.jquery.com/jquery-latest.js»>/script> script type=»text/javascript»> $(document).ready(function()< $(‘#button_save’).click(function() < var text = $(‘#text’).val(); $.ajax(, success: function (data) < $(‘#text’).val(»); alert(data.rez); >, error: function(XMLHttpRequest, textStatus, errorThrown) < $(‘#text’).val(‘ERROR = ‘+ errorThrown); alert(textStatus); >>); >); >);/*end ready*/ /script> /head> body > input type=»text» id=»text» size=»40″ value=»748″ > input type=»button» value=»Отправка» id=»button_save»> /body> /html>
articlejs.php
1 2 3
$res[‘rez’]=»успешно»; echo json_encode($res);?>
Регистрация: 04.06.2013
Сообщений: 1,532

Зачем a в кавычках.

Добавлено через 3 минуты

Почему не делаете как Вам говорят, а упорно гнёте свою линию

А Вы объясните где ошибка в моем коде, а потом уже предлагайте свой. Моя ошибка мне более интересна. Тем более что у Вас то же скорее всего ошибка

alert(data.rez);
Не работает
901 / 833 / 198
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
В том коде, что Вы выложили, нет изначально
var a = location.search;

Чтобы небыло ошибки я передаю букву ‘a’ — это, в данном случае не суть важно, данные всё равно не обрабатываются в articlejs.php

Регистрация: 04.06.2013
Сообщений: 1,532
В том коде, что Вы выложили, нет изначально

Просто думал что это не столь важно

данные всё равно не обрабатываются в articlejs.php

Они обрабатываются и записываются в базу данных на сервере(articlejs.php я тоже не весь код выложил) только вот что то с ajaxом наверно

901 / 833 / 198
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
alert(data.rez);
Не работает
Работает
Перейдите по ссылке
в примере PHP такой

1 2 3
$res[‘rez’]=»успешно»; echo json_encode($res);?>
Вот тоже самое, но PHP уже такой:
echo «»rez»: «Успешно»>»;?>
А Вы объясните где ошибка в моем коде,
Так объяснили вроде
Регистрация: 04.06.2013
Сообщений: 1,532

И вы хотите сказать что проблемы из за ответа сервера?

Добавлено через 11 минут

Вот тоже самое, но PHP уже такой:
Код PHP
1
2
echo «»;?>
если PHP такое то нужно добавить обработчик который разберет строку JSON например JSON.parse()
Регистрация: 04.06.2013
Сообщений: 1,532
Вот весь PHP. МОжет это как то поможет

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
header(‘content-type: application/x-javascript; charset=utf-8′); if (((isset($_COOKIE[’email’]) and isset($_COOKIE[‘password’])) or (isset($_SESSION[‘password’]) and isset($_SESSION[’email’]))) and isset($_POST[‘a’])) { include(«baza/baza1.php»); $q=$_POST[‘a’]; $a = strlen($q); $b = $a -3; $qsu = substr($q, -$b, $b); $emailc = $_COOKIE[’email’]; $passwordc=$_COOKIE[‘password’]; $emails = $_SESSION[’email’]; $passwords = $_SESSION[‘password’]; $rezult = mysql_query(«SELECT id FROM noteusers WHERE email=’$emailc’ AND password=’$passwordc’ OR email=’$emails’ AND password=’$passwords’»,$db); $myrow = mysql_fetch_array($rezult); $id = $myrow[‘id’]; //добавить коментрий if (isset($_POST[‘text’]) and isset($_POST[‘a’])) { $text=$_POST[‘text’]; $rezultatv = mysql_query(«INSERT INTO commentsartcles (autor,articleid,text) VALUES (‘$id’,$qsu,’$text’)»); echo json_encode(array(‘rez’=>’done’)); exit(); } //голосовать за стаью if (isset($_POST[‘param’])) { $param=$_POST[‘param’]; $rezultat = mysql_query(«INSERT INTO votearticles (articlesid,user,vote) VALUES ($qsu,’$id’,’$param’)»); } } ?>
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Почему не срабатывает функция
у меня в одном файле на удаление много много функция.. одна из них должна удалять собщения функция.

Почему не срабатывает функция .next()?
Всем привет, помогите понять, чего не срабатывает жКверивская функция .next() window.setPercents.

Почему не срабатывает функция TRIM?
Добрый день! Есть запрос, в котором происходит запись в курсор айдишника(work_id) и значения.

Почему не срабатывает SQL запрос в VBA?
Уже второй час сижу с ним — не могу понять проблемы. Смотрите: var = Me.ИД_Пользователя Set rst.

Источник: www.cyberforum.ru

Ошибка при отправке ajax-запроса

Мое первое беспокойство, могу ли я отправить более одного предложения о местоположении?
второй
Во-вторых, почему ошибка в этой конкретной строке?

Заранее спасибо за помощь.

Решение

Вы объявляете свои переменные правильно. Var — это языковая конструкция, которая объявляет следующее как переменную. Либо измените код, чтобы использовать точки с запятой в конце каждого оператора var следующим образом:

var value_0 = $(‘input[name=nome]’).val(); var value_1 = $(‘input[name=email]’).val();

или удалите все, кроме первого оператора var, следующим образом:

var value_0 = $(‘input[name=nome]’).val(), value_1 = $(‘input[name=email]’).val(), value_2 = $(‘input[name=contacto]’).val();

Другие решения

Других решений пока нет …

Источник: web-answers.ru

jQuery Ajax — события успеха и ошибки

Использовать будем $.ajax(), перед тем как писать скрипт, не забываем подключать jQuery.
Основа нашего скрипта будет выглядеть так:

$(‘.price-table’).on(‘click’, ‘.btn-item-add’, function()< $.ajax(<>); return false; >);

В данном коде мы видим, что по клику на кнопку с классом .btn-item-add, у которой кстати должен быть родитель с классом .price-table, мы вызываем аякс (пока что безе параметров для более простого понимания). return false — дописываем на случай если наша кнопка сделана через тег .

Теперь добавим события и базовые параметры:

//AJAX ADD TO CART $(‘.price-table’).on(‘click’, ‘.btn-item-add’, function()< var $id = $(this).data(‘id’), $thisBut = $(this), $count = $(this).prev(‘.quant-block’).find(‘.pr-item-quant’).val(); $.ajax(< url: ‘/include/ajax_cart.php’, type: ‘get’, cache: false, data: ‘id=’+$id+’).done(function(data)< //смотрим какой ответ отправляется в случае успеха console.log(data); >).complete(function()< // после того как аякс выполнился >).error(function()< // пишем ошибку в консоль если что-то пошло не так console.log(‘There was an error’); >); return false; >);

В самом начале добавились параметры, а для аякса прописали параметры: url, type, cache и data. Обратите внимание что мы передаем параметры, а в PHP $_GET в дальнейшем можно их обработать. Ссылку указываем относительно корня сайта.

Для примера у нас есть 3 jQuery события — done, complete и error. Отличие done от complete лишь в том что done вызывается первым. Таким образом мы можем в первой функции выполнить запрос, а во второй делать что душе угодно .

Как вызвать 2 аякса подряд при помощи jQuery

Рассмотрим код посложнее. По клику у нас появляется прелоадер по середине экрана.

//AJAX ADD TO CART $(‘.price-table’).on(‘click’, ‘.btn-item-add’, function() ‘); var $id = $(this).data(‘id’), $thisBut = $(this), $count = $(this).prev(‘.quant-block’).find(‘.pr-item-quant’).val(); $.ajax(< url: ‘/include/ajax_cart.php’, type: ‘get’, cache: false, data: ‘id=’+$id+’).done(function(data)< $(‘#bid4’).html(data); >).complete(function()< $.ajax(< url: ‘/include/ajax_cart_big.php’, type: ‘get’, cache: false, data: false, >).done(function(data)< $(‘#bid2’).html(data); >); $(‘.ajax-preload’).remove(); $(‘body’).append(‘Товар добавлен в корзину’); $(‘.tooltip’).animate(< top: ’20px’ >, 1500).fadeOut(1500); >).error(function()< console.log(‘There was an error’); >); return false; >);

Затем наши знакомые параметры ($id, $thisBut, $count). В функции .complete записываем вызов еще одного ajax запроса. Также убираем наш прелоадер. Таким образом можно выиграть немного времени при загрузке данных.

Весь код разбирать не будем, т.к. статья и так получилась больше чем предполагалось, но я надеюсь что вы всё поняли .

UPDATE 23.10.2018

Как передать файл через ajax:

Источник: forwww.com

Также сообщения о сбоях есть в городах:
Королёв, Московская область; Тайга, Кузба́сс.

Подсказки? Разочарования? Обсуждаем проблемы сервиса с другими посетителями сайта:

AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.

Полное описание функции AJAX на jquery.com.

$.ajax({
	url: '/index.php',         /* Куда пойдет запрос */
	method: 'get',             /* Метод передачи (post или get) */
	dataType: 'html',          /* Тип данных в ответе (xml, json, script, html). */
	data: {text: 'Текст'},     /* Параметры передаваемые в запросе. */
	success: function(data){   /* функция которая будет выполнена после успешного запроса.  */
		alert(data);            /* В переменной data содержится ответ от index.php. */
	}
});

$.get('/index.php', {text: 'Текст'}, function(data){
	alert(data);
});

echo 'Данные приняты - ' . $_GET['text'];

$.ajax({
	url: '/index.php',
	method: 'get',
	cache: false
});

$.ajax({
	url: '/index.php',
	method: 'post',
	dataType: 'html',
	data: {text: 'Текст'},
	success: function(data){
		alert(data);
	}
});

$.post('/index.php', {text: 'Текст'}, function(data){
	alert(data);
});

echo 'Данные приняты - ' . $_POST['text'];

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

if (empty($_POST['login'])) {
	echo 'Укажите логин';
} elseif (empty($_POST['password'])) {
	echo 'Укажите пароль';
} else {
	echo 'Авторизация...';
}

$.ajax({
	url: '/json.php',
	method: 'get',
	dataType: 'json',
	success: function(data){
		alert(data.text);    /* выведет "Текст" */
		alert(data.error);   /* выведет "Ошибка" */
	}
});

$.getJSON('/json.php', function(data) {
	alert(data.text);
	alert(data.error);
});

header('Content-Type: application/json');

$result = array(
	'text'  => 'Текст',
	'error' => 'Ошибка'
);

echo json_encode($result);

...

// Очистка буфера
ob_end_clean(); 
		
header('Content-Type: application/json');
echo json_encode($result, JSON_UNESCAPED_UNICODE);
exit();

$.ajax({
	method: 'get',
	url: '/script.js',
	dataType: "script"
});

$.getScript('/script.js');

var text = '';

$.ajax({
	url: '/index.php',
	method: 'get',
	dataType: 'html',
	success: function(data){
		text = data;
	}
});

alert(text);  /* Переменная будет пустая. */

var text = '';

$.ajax({
	url: '/index.php',
	method: 'get',
	dataType: 'html',
	async: false,
	success: function(data){
		text = data;
	}
});

alert(text); /* В переменной будет результат из index.php. */

$.ajax({
	url: '/index.php',
	method: 'get',
	dataType: 'html',
	headers: {'Token_value': 123},
	success: function(data){
		console.dir(data);
	}
});

<?php
echo $_SERVER['HTTP_TOKEN_VALUE']; // 123

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

$.ajaxSetup({
	error: function (jqXHR, exception) {
		...
	}
});

• Связанные категории:
• Ajax
  » Low-Level Interface

Returns: jqXHR

Выполняет асинхронный HTTP (Ajax) запрос

• version added: 1.5jQuery.ajax( url [, settings] )

  url
  Тип: Строка
  URL адрес, на который будет отправлен Ajax запрос

  settings
  Тип: Объект
  Набор параметров вида ключ / значение, которые настраивают запрос Ajax. Все настройки опциональны. По умолчанию настройки берутся из $.ajaxSetup(). Ниже приведен полный список всех настроек.

• version added: 1.0jQuery.ajax( settings )

  settings
  Тип: Объект
  Набор параметров вида ключ / значение, которые настраивают запрос Ajax. Все настройки опциональны. По умолчанию настройки берутся из $.ajaxSetup().

settings:

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
    $(this).addClass("done");
  }
});    
    

$.ajax({
  statusCode:{
    404:function(){
      alert('Страница не найдена');
    }
  }
});    

$.ajax({
   url: a_cross_domain_url,
   xhrFields: {
      withCredentials: true
   }
});

Примеры

Сохранить данные на сервере и оповестить об этом пользователя.

$.ajax({
  type: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});

Получить последнюю версию HTML страницы

$.ajax({
  url: "test.html",
  cache: false
}).done(function( html ) {
  $("#results").append(html);
});

Передаём в качестве данных XML документ. Отключаем автоматическую конвертацию данных в обычную строку, задав настройке processData значение false:

var xmlDocument = [create xml document];
var xmlRequest = $.ajax({
  url: "page.php",
  processData: false,
  data: xmlDocument
});
 
xmlRequest.done(handleResponse);

Отправить на сервер значение ID. Сохранить данные, оповестить пользователя. Если запрос не прошёл, сообщить об этом пользователю.

var menuId = $("ul.nav").first().attr("id");
var request = $.ajax({
  url: "script.php",
  type: "POST",
  data: {id : menuId},
  dataType: "html"
});
 
request.done(function(msg) {
  $("#log").html( msg );
});
 
request.fail(function(jqXHR, textStatus) {
  alert( "Request failed: " + textStatus );
});

Загрузить и выполнить файл JavaScript:

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

Добрый вечер дорогие форумчане. Подскажите пожалуйста, почему при попытке отправить ajax запрос, у меня выскакивает alert из error??? Всю голову уже сломал, весь интернет уже перерыл.
2) И почему после того как я нажимаю ок в alert у меня перезагружается страница??

шаблон

{% extends "crm/main_struct.html" %}
{% load staticfiles %}

{% block content %}

<!--ОБЯЗАТЕЛЬНО СДЕЛАТЬ ФУНКЦИЮ НА JS КОТОРАЯ БУДЕТ ВЫЧИСЛЯТЬ ОТСТУПЫ И В НУЖНОЕ МЕСТО ПИХАТЬ КОНТЕНТ САЙТОВ-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script>
$(document).ready(function() {
  $('ul.tabs_m_w').each(function() {
    $(this).find('li').each(function(i) {
      $(this).click(function() {
        $(this).addClass('active').siblings().removeClass('active');
        var p = $(this).parents('div.tabs_container_m_w');
        p.find('div.tab_container_m_w').hide();
        p.find('div.tab_container_m_w:eq(' + i + ')').show();
      });
    });
  });
})
</script>
<a href="{{url}}/crm/my_work/new/" class="add_notebook_a">
    <div class="add_notebook">Добавить</div>
</a>
<div class="tabs_container_m_w">
  <ul class="tabs_m_w">
      {% for notebook in notebookList %}
        <li class="inl-bl_m_w">
            <div class="m_w_list_head">{{notebook.name}}</div>
            <div class="m_w_list_date">{{notebook.date_firstly}}</div>
            <div class="m_w_list_kr_info">{{notebook.kr_info}}</div>
        </li>
      {% endfor %}
  </ul>

    {% for notebook in notebookList %}
  <div class="tab_container_m_w">
      <a href="" onclick="resend({{notebook.id}});" class="a_tab">
          <div class="m_w_save">
            Сохранить
          </div>
      </a>
    <div class="m_w_info_head" id="name{{notebook.id}}" contentEditable="true">{{notebook.name}}</div>
      <div class="m_w_info_info" id="info{{notebook.id}}" contentEditable="true">{{notebook.information}}</div>
  </div>
{% endfor %}

</div>

<script>
    function resend(pk){
           var name = document.getElementById('name' + pk).innerHTML.trim().replace(/<.*?>/g, "");
           var info = document.getElementById('info' + pk).innerHTML.trim().replace(/<.*?>/g, "");
           edit(name, info, pk);
    }
</script>

<script>
function edit(name, info, pk) {
// Если поля заполнены, отправляем их значения
        $.ajax({
            error: function() {
                alert('Ошибка получения запроса');
            },
    // При успехе очищаем поля и меняем кнопочку
                success: function(data) {
                 alert("Успех"); // для проверки, что скрипт работает
                },
    // CSRF механизм защиты Django
                beforeSend: function(xhr, settings) {
                    console.log('-------------before send--');
                    function getCookie(name) {
                        var cookieValue = null;
                        if (document.cookie && document.cookie != '') {
                            var cookies = document.cookie.split(';');
                            for (var i = 0; i < cookies.length; i++) {
                                var cookie = jQuery.trim(cookies[i]);
                                // Does this cookie string begin with the name we want?
                            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                                break;
                            }
                        }
                    }
                    return cookieValue;
                    }
                    if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
                        // Only send the token to relative URLs i.e. locally.
                        xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
                    }
                }
            });// ajax


        return false;
    };
</script>
{% endblock %}

urls.py

urlpatterns = patterns('',
    url(r'^my_work/edit/$', views.NBEdit, name='crm_edit_NB'),
)

views.py

def NBEdit(request):
    if request.is_ajax():
        for i in MyDela.objects.filter(pk=request.POST.get("id", "")):
            i.name = request.POST.get("name", "")[:250]
            i.information = request.POST.get("info", "")
            i.save()
        #  return HttpResponse("ok")
        return HttpResponseRedirect('/crm/sites/')
    else:
        #  return HttpResponse("bad")
        return HttpResponseRedirect('/crm/zayvki/')

Прошу не кидаться помидорами, я только учусь кодить))

AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.

Полное описание функции AJAX на jquery.com.

$.ajax({
	url: '/index.php',         /* Куда пойдет запрос */
	method: 'get',             /* Метод передачи (post или get) */
	dataType: 'html',          /* Тип данных в ответе (xml, json, script, html). */
	data: {text: 'Текст'},     /* Параметры передаваемые в запросе. */
	success: function(data){   /* функция которая будет выполнена после успешного запроса.  */
		alert(data);            /* В переменной data содержится ответ от index.php. */
	}
});

$.get('/index.php', {text: 'Текст'}, function(data){
	alert(data);
});

echo 'Данные приняты - ' . $_GET['text'];

$.ajax({
	url: '/index.php',
	method: 'get',
	cache: false
});

$.ajax({
	url: '/index.php',
	method: 'post',
	dataType: 'html',
	data: {text: 'Текст'},
	success: function(data){
		alert(data);
	}
});

$.post('/index.php', {text: 'Текст'}, function(data){
	alert(data);
});

echo 'Данные приняты - ' . $_POST['text'];

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

if (empty($_POST['login'])) {
	echo 'Укажите логин';
} elseif (empty($_POST['password'])) {
	echo 'Укажите пароль';
} else {
	echo 'Авторизация...';
}

$.ajax({
	url: '/json.php',
	method: 'get',
	dataType: 'json',
	success: function(data){
		alert(data.text);    /* выведет "Текст" */
		alert(data.error);   /* выведет "Ошибка" */
	}
});

$.getJSON('/json.php', function(data) {
	alert(data.text);
	alert(data.error);
});

header('Content-Type: application/json');

$result = array(
	'text'  => 'Текст',
	'error' => 'Ошибка'
);

echo json_encode($result);

...

// Очистка буфера
ob_end_clean(); 
		
header('Content-Type: application/json');
echo json_encode($result, JSON_UNESCAPED_UNICODE);
exit();

$.ajax({
	method: 'get',
	url: '/script.js',
	dataType: "script"
});

$.getScript('/script.js');

var text = '';

$.ajax({
	url: '/index.php',
	method: 'get',
	dataType: 'html',
	success: function(data){
		text = data;
	}
});

alert(text);  /* Переменная будет пустая. */

var text = '';

$.ajax({
	url: '/index.php',
	method: 'get',
	dataType: 'html',
	async: false,
	success: function(data){
		text = data;
	}
});

alert(text); /* В переменной будет результат из index.php. */

$.ajax({
	url: '/index.php',
	method: 'get',
	dataType: 'html',
	headers: {'Token_value': 123},
	success: function(data){
		console.dir(data);
	}
});

<?php
echo $_SERVER['HTTP_TOKEN_VALUE']; // 123

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

$.ajaxSetup({
	error: function (jqXHR, exception) {
		...
	}
});

jQuery.ajax()

При выполнении ajax-запроса, в заголовках (header) указываются допустимые типы содержимого, ожидаемого от сервера. Значения этих типов будут взяты из параметра accepts . Если требуется его изменить, лучше сделать это с помощью метода $.ajaxSetup().

async

По умолчанию: true

По умолчанию, все запросы отсылаются асинхронно (значение данного параметра true). Если же вам нужны синхронные запросы, то параметру async выставите значение false. Кроссдоменные запросы и dataType: «jsonp» не выполняются в синхронном режиме. Учтите, синхронные запросы могут на время выполнения запроса заблокировать браузер.

beforeSend(jqXHR jqXHR , объект settings)

Функция, которая будет вызвана непосредственно перед отправкой ajax-запроса на сервер. Она может быть использована для модификации jqXHR-объекта (в ранних версиях, до jQuery 1.4.x использовался XMLHttpRequest). Так же может использоваться для изменения заголовков (headers) и т.д. Объект типа jqXHR и объект настроек, передаются в качестве аргументов.

КАК ОБОЙТИ БЛОКИРОВКУ НА САЙТЕ FUNPAY ? ПОЛУЧИЛ БАН НА ФАНПЕЙ, ЧТО ДЕЛАТЬ ? РАЗБАН ФП АККАУНТА !

Возврат значения false в функции beforeSend вызовет отмену ajax-запроса. Начиная с jQuery 1.5, beforeSend сработает вне зависимости от типа запроса.

cache

По умолчанию: true, false для типов данных ‘script’ and ‘jsonp’

Если false, запрашиваемая страница не будет кэшироваться браузером.

complete( jqXHR jqXHR, строка textStatus)

Функция, которая будет вызвана после завершения ajax запроса (срабатывает после функций-обработчиков success и error). Функция принимает два аргумента: объект типа jqXHR (в ранних версиях, до jQuery 1.4.x использовался XMLHttpRequest) и строку, характеризующую статус запроса («success», «notmodified», «error», «timeout», «abort», или «parsererror»). Начиная с jQuery 1.5, complete может принимать массив функций.

contents

Параметр задается в формате и определяет, как jQuery будет разбирать ответ от сервера, в зависимости от его типа. (добалено в версии 1.5)

contentType

По умолчанию: ‘application/x-www-form-urlencoded; charset=UTF-8’

При отправке Ajax запроса, данные передаются в том виде, в котором указаны в данном параметре. По умолчанию используется ‘application/x-www-form-urlencoded; charset=UTF-8’. Если задать значение самим, то оно будет отправлено на сервер. Если кодировка не указана, то по умолчанию будет использоваться кодировка выставленная на сервере.

context

Объект, который станет контекстом после выполнения запроса (передаваемое значение в переменную this). Например, если указать в качестве контекста DOM-элемент, то все обработчики ajax-запроса тоже будут выполняться в контексте данного DOM-элемента. В данном примере ключевое слово this будет содержать document.body:

$.ajax( < url: «test.html», context: document.body, success: function()< $(this).addClass(«done»); >>);

converters

Определяет, с помощью каких функций будет производиться конвертация значений из одного типа, в другой. (добалено в версии 1.5)

😒 Бан на FunPay💩

crossDomain

По умолчанию: false для одного и того же домена, true для кроссбоменных запросов.

Если вы хотите, чтобы выполнить кросс-доменный запрос (например, JSONP) на том же домене, выставите true в настройке crossDomain. Это позволяет, например, сделать серверные перенаправление на другой домен. (добалено в версии 1.5)

data

Данные, которые будут переданы на сервер. Если данные не являются строкой, то они конвертируются в строку запроса. Для запросов типа GET данные прикрепляются к URL. Объект должен состоять из пар ключ/значение. Если в значении массив, то jQuery упорядочивает значения в зависимости от настройки traditional.

По умолчанию, например, превращается в foo=bar2.

dataFilter( строка data, строка type)

Функция, с помощью которой будут обрабатываться сырые данные типа XMLHttpRequest, полученные от сервера. Ваша функция должна играть роль фильтра и возвращать очищенную строку. В функцию передаются два параметра: полученные данные и значение параметра dataType.

dataType

По умолчанию: автоматически определяемая строка (xml, json, script, или html)

Тип данных, ожидаемых от сервера. Если опция не определена, то jQuery попытается определить тип, основываясь на MIME-типе ответа.

error( jqXHR jqXHR, строка textStatus, строка errorThrown)

Функция, исполняемая в случае неудачного запроса. Принимает 3 аргумента: объект jqXHR (в прошлом XMLHttpRequest), строку с описанием ошибки, а так же строку исключения, если оно было выбрашено. Второй аргумент может содержать следующие значения: null, «timeout», «error», «abort», и «parsererror». В случае если происходит HTTP ошибка, то в третий аргумент будет записан её текстовой статус.

К примеру, «Not Found» или «Internal Server Error.». Начиная с jQuery 1.5, вместо одной функции, этот параметр может принимать массив функций. Событие error не происходит при dataType равному script или JSONP.

global

По умолчанию: true.

Вызывать или нет глобальные обработчики событий Ajax для этого запроса (например ajaxStart или ajaxStop).

headers

По умолчанию: <>

Здесь можно указать дополнительные заголовки запроса (header). Значения этой настройки будут введены до вызова функции beforeSend, в которой могут быть внесены окончательные изменения в заголовки. (добалено в версии 1.5)

ifModified

По умолчанию: false

Запрос будет считаться успешным только в случае, если данные ответа изменились со времени последнего запроса. Проверка осуществляется по заголовку Last-Modified. По умолчани, данная опция отключена. В jQuery 1.4 так же проверяется значение ‘etag’, для отслеживания факта изменения данных.

isLocal

По умолчанию: в зависимости от текущей локации

Параметр определяет, запущена ли веб-страница локально (например по протоколу file, *-extension, и widget) или нет (например по протоколу http). Данную настройку лучше менять с помощью метода $.ajaxSetup(). (добалено в версии 1.5)

jsonp

Определяет имя параметра, который добавляется в url JSONP-запроса(по умолчанию, используется «callback»). К примеру настройка преобразуется в часть url строки ‘onJSONPLoad=?’. Начиная с версии 1.5, указание в этом параметре false предотвращает добавление в url дополнительного параметра. В этом случае, необходимо установить значение настройки jsonpCallback. Например так: .

jsonpCallback

Функция, которая будет вызвана при ответе сервера на запрос типа JSONP. По умолчанию, jQuery генерирует произвольное уникальное имя этой функции, что более предпочтительно. Если вы хотите использовать кэширование GET запросов, то вписывайте название функции сами. Начиная с версии 1.5 можно указать функцию, для того, чтобы обработать ответ сервера самостоятельно.

mimeType

Здесь можно указать тип данных, в котором ожидается ответ от сервера вместо XHR. (добалено в версии 1.5.1)

password

Пароль, который будет использоваться в ответ на запрос проверки подлинности доступа HTTP (если это требуется)

username

Имя пользователя, которое будет использоваться в ответ на запрос проверки подлинности доступа HTTP (если это требуется)

processData

По умолчанию: true;

По умолчанию передаваемые на сервер данные преобразуются из объекта в строку запроса и отправляются как «application/x-www-form-urlencoded». Если вам необходимо отправить DOM-документ или иные данные, которые нельзя подвергать конвертированию установите опцию processData в false.

scriptCharset

Применяется только для Ajax GET-запросов типов ‘JSONP’ и ‘script ‘. Если сервер на стороннем домене использует кодировку, отличную от вашей, необходимо указать кодировку стороннего сервера.

statusCode

Набор пар, в котором кодам выполнения запроса сопоставляются функции, которые при этом будет вызваны. Например, для кода 404 (страницы не существуют) можно сделать вывод сообщения на экран:

$.ajax( < statusCode:< 404:function()< alert(‘Страница не найдена’); >> >);

Если запрос прошёл успешно, то в качестве параметра, анонимная функция будет принимать те же параметры, что и при success. При ошибке, будет принимать то же самое что и при функции-обработчике error. (добалено в версии 1.5)

success( объект data, строка textStatus, объект jqXHR)

Функция, которая будет вызвана в случае успешного завершения запроса. Принимает 3 аргумента — данные (data), присланные сервером и прошедшие предварительную обработку; строка со статусом выполнения (textStatus); объект jqXHR (в версиях до 1.5 вместо jqXHR используетсяXMLHttpRequest). С версии jQuery 1.5, вместо одной функции, этот параметр может принимать массив функций.

timeout

Время ожидания ответа от сервера в миллисекундах. Переписывает глобальную настройку этого же параметра в $.ajaxSetup(). Если это время будет превышено, запрос будет завершен с ошибкой и произойдет событие error, которое будет иметь статус «timeout».

traditional

По умолчанию: false

Установите значение этого параметра в true, для того, чтобы использовать традиционный стиль сериализации.

type

По умолчанию: GET

Определяет тип запроса GET или POST. Можно также использовать другие HTTP-запросы (такие как PUT или DELETE), но следует помнить, что они поддерживаются не всеми бразерами.

url

По умолчанию: текущая страница.

Страница, накоторую будет отправлен запрос.

xhr

По умолчанию ActiveXObject в IE, XMLHttpRequest в других браузерах.

Callback-функция, для создания объекта XMLHttpRequest. Создав свою функцию, вы берёте на себя всю ответственность за формирование объекта.

xhrFields

Объект вида для изменения значений соответствующих полей объекта XMLHttpRequest.

$.ajax( < url: a_cross_domain_url, xhrFields: < withCredentials: true >>);

(добалено в версии 1.5.1)

Примеры

Сохранить данные на сервере и оповестить об этом пользователя.

$.ajax( < type: «POST», url: «some.php», data: < name: «John», location: «Boston» >>).done(function( msg ) < alert( «Data Saved: » + msg ); >);

Получить последнюю версию HTML страницы

$.ajax(< url: «test.html», cache: false >).done(function( html ) < $(«#results»).append(html); >);

Передаём в качестве данных XML документ. Отключаем автоматическую конвертацию данных в обычную строку, задав настройке processData значение false :

var xmlDocument = [create xml document]; var xmlRequest = $.ajax(< url: «page.php», processData: false, data: xmlDocument >); xmlRequest.done(handleResponse);

Отправить на сервер значение ID. Сохранить данные, оповестить пользователя. Если запрос не прошёл, сообщить об этом пользователю.

var menuId = $(«ul.nav»).first().attr(«id»); var request = $.ajax(< url: «script.php», type: «POST», data: , dataType: «html» >); request.done(function(msg) < $(«#log»).html( msg ); >); request.fail(function(jqXHR, textStatus) < alert( «Request failed: » + textStatus ); >);

Загрузить и выполнить файл JavaScript:

$.ajax(< type: «GET», url: «test.js», dataType: «script» >);

Источник: ruseller.com

Как поймать сообщение об ошибке Ajax-запроса?

Я хотел бы поймать ошибку и показать соответствующее сообщение, если запрос Ajax терпит неудачу.

мой код выглядит следующим образом, но мне не удалось поймать неудачный запрос Ajax.

function getAjaxData(id) < $.post(«status.ajax.php», , function(data)< var tab1; if (data.length>0) < tab1 = data; >else < tab1 = «Error in Ajax»; >return tab1; >); >

я узнал, что» ошибка в Ajax » никогда не выполняется, когда запрос Ajax не удался.

Как я могу обработать ошибку Ajax и показать соответствующее сообщение, если это не удастся?

автор: Peter Mortensen

6 ответов

начиная с jQuery 1.5 вы можете использовать механизм отложенных объектов:

$.post(‘some.php’, ) .done(function(msg)< >) .fail(function(xhr, status, error) < // error handling >);

другой способ-использовать .ajax :

$.ajax(< type: «POST», url: «some.php», data: «name=John, success: function(msg)< alert( «Data Saved: » + msg ); >, error: function(XMLHttpRequest, textStatus, errorThrown) < alert(«some error»); >>);
автор: choise

jQuery 1.5 добавил отложенные объекты, которые прекрасно справляются с этим. Просто позвоните $.post и прикрепите любые обработчики, которые вы хотите после вызова. Отложенные объекты даже позволяют присоединить несколько обработчиков успеха и ошибок.

$.post(‘status.ajax.php’, ) .done( function(msg) < . >) .fail( function(xhr, textStatus, errorThrown) < alert(xhr.responseText); >);

до jQuery 1.8 функция done называлась success и fail называлась error .

автор: Michael Venable

$.ajax(< type: ‘POST’, url: ‘status.ajax.php’, data: < deviceId: id >, success: function(data)< // your code from above >, error: function(xhr, textStatus, error) < console.log(xhr.statusText); console.log(textStatus); console.log(error); >>);
автор: jAndy
$.post(‘someUri’, < >, function(data)< doSomeStuff >) .fail(function(error) < alert(error.responseJSON) >);
автор: marknery

всякий раз, когда запрос Ajax завершается с ошибкой jQuery запускает событие ajaxError. Все обработчики которые были зарегистрированы в .метод ajaxError() выполняется при эта пора.

$(‘.log’).ajaxError(function() < $(this).text(‘Triggered ajaxError handler.’); >);

Я бы предложил чтение ajaxError документация. Он делает больше чем просто use-case продемонстрированный выше-главным образом свое обратный вызов принимает ряд параметров:

$(‘.log’).ajaxError(function(e, xhr, settings, exception) < if (settings.url == ‘ajax/missing.html’) < $(this).text(‘Triggered ajaxError handler.’); >>);
автор: karim79

я исправил эту проблему путем объявления datatype: ‘json’ в моем вызове jQuery ajax.

Источник: askdev.ru

AJAX запрос. Почему срабатывает функция ошибки?

Почему не срабатывает Ajax запрос?
Добрый день! Не пойму почему не срабатыват запрос. <form method=»POST».

Не срабатывает ajax запрос
По нажатию на кнопку нужно обновить содержимое блока: <div onClick=»taskreload();.

не срабатывает Ajax запрос
Пытаюсь сделать следущее: с помощю PHP взять некую информацию с сайта. Т.е. есть поле ввода, ввожу.

Ajax: почему не срабатывает состояние success?
Приветствую всех! Помогите понять почему не срабатывает состояние success! Есть код //.

810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2

ну так может в самом articlejs.php какие-то ошибки? в результате ответ не приходит от сервера и ajax обрбатывает запрос как ошибку.

Регистрация: 04.06.2013
Сообщений: 1,532

ну так может в самом articlejs.php какие-то ошибки? в результате ответ не приходит от сервера и ajax обрбатывает запрос как ошибку.

Сервер отвечает

echo «»rez»: «Успешно»>»;
810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2

посмотрите через хром ответ сервера: правой клавишей «просмотреть код элемента» и далее вкладка Network, после это сделайте действие которое вызывает ваш ajax запрос

и если вы отправляете в формате json, то надо получать его так:

alert(data.rez);
Регистрация: 04.06.2013
Сообщений: 1,532

посмотрите через хром ответ сервера: правой клавишей «просмотреть код элемента» и далее вкладка Network, после это сделайте действие которое вызывает ваш ajax запрос

Что странно что type text/html

810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2
ну все пришло. значит должно работать. Что пишется в алерте?

Регистрация: 04.06.2013
Сообщений: 1,532

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
$(‘#button_save’).click(function() { var text = $(‘#text’).

val(); $.ajax({type:»POST», dataType:»json», url:»articlejs.php», data:{text:text,a:a}, success: function (data) { $(‘#text’).val(»); alert(data.

rez); }, error: function(XMLHttpRequest, textStatus, errorThrown) { $(‘#text’).val(‘ERROR’+ XMLHttpRequest +» «+ errorThrown) alert(textStatus);}, }); });
сделал как Вы сказали но функция ошибки по прежнему срабатывает

810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2

Что пишется в алерте?

и также посмотрите через браузер что пришло от сервера (кликните по articlejs.php)

Регистрация: 04.06.2013
Сообщений: 1,532
Что пишется в алерте?
Алерт «ошибки»
и также посмотрите через браузер что пришло от сервера (кликните по articlejs.php)
901 / 833 / 198
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
$(‘#button_save’).click(function() { var text = $(‘#text’).val(); $.ajax({type:»POST», dataType:»json», url:»articlejs.php», data:{text:text,a:a}, success: function (data) { $(‘#text’).val(»); alert(data.rez); }, error: function(XMLHttpRequest, textStatus, errorThrown) { $(‘#text’).val(‘ERROR’+ XMLHttpRequest +» «+ errorThrown) alert(textStatus);}, }); });
В строке 5 — что за а? Выдаёт синтаксическую ошибку и не число и не строка
$(‘#text’).val(‘ERROR’+ XMLHttpRequest +» «+ errorThrown)

XMLHttpRequest — это объект, зачем помещать его val ?

1 2 3
$res[‘rez’]=»успешно»; echo json_encode($res);?>
Всё работает.
Регистрация: 04.06.2013
Сообщений: 1,532
В строке 5 — что за а?
var a = location.search;
XMLHttpRequest — это объект, зачем помещать его val ?
Просто такЯ же только учусь
901 / 833 / 198
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
Почему не делаете как Вам говорят, а упорно гнёте свою линию
Делайте вот так
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
html> head> title>ajaxError/title> meta http-equiv=»Content-Type» content=»text/html; charset=windows-utf-8″ /> script src=»http://code.jquery.com/jquery-latest.js»>/script> script type=»text/javascript»> $(document).ready(function()< $(‘#button_save’).click(function() < var text = $(‘#text’).val(); $.ajax(, success: function (data) < $(‘#text’).val(»); alert(data.rez); >, error: function(XMLHttpRequest, textStatus, errorThrown) < $(‘#text’).val(‘ERROR = ‘+ errorThrown); alert(textStatus); >>); >); >);/*end ready*/ /script> /head> body > input type=»text» id=»text» size=»40″ value=»748″ > input type=»button» value=»Отправка» id=»button_save»> /body> /html>
articlejs.php
1 2 3
$res[‘rez’]=»успешно»; echo json_encode($res);?>
Регистрация: 04.06.2013
Сообщений: 1,532

Зачем a в кавычках.

Добавлено через 3 минуты

Почему не делаете как Вам говорят, а упорно гнёте свою линию

А Вы объясните где ошибка в моем коде, а потом уже предлагайте свой. Моя ошибка мне более интересна. Тем более что у Вас то же скорее всего ошибка

alert(data.rez);
Не работает
901 / 833 / 198
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
В том коде, что Вы выложили, нет изначально
var a = location.search;

Чтобы небыло ошибки я передаю букву ‘a’ — это, в данном случае не суть важно, данные всё равно не обрабатываются в articlejs.php

Регистрация: 04.06.2013
Сообщений: 1,532
В том коде, что Вы выложили, нет изначально

Просто думал что это не столь важно

данные всё равно не обрабатываются в articlejs.php

Они обрабатываются и записываются в базу данных на сервере(articlejs.php я тоже не весь код выложил) только вот что то с ajaxом наверно

901 / 833 / 198
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
alert(data.rez);
Не работает
Работает
Перейдите по ссылке
в примере PHP такой

1 2 3
$res[‘rez’]=»успешно»; echo json_encode($res);?>
Вот тоже самое, но PHP уже такой:
echo «»rez»: «Успешно»>»;?>
А Вы объясните где ошибка в моем коде,
Так объяснили вроде
Регистрация: 04.06.2013
Сообщений: 1,532

И вы хотите сказать что проблемы из за ответа сервера?

Добавлено через 11 минут

Вот тоже самое, но PHP уже такой:
Код PHP
1
2
echo «»;?>
если PHP такое то нужно добавить обработчик который разберет строку JSON например JSON.parse()
Регистрация: 04.06.2013
Сообщений: 1,532
Вот весь PHP. МОжет это как то поможет

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
header(‘content-type: application/x-javascript; charset=utf-8′); if (((isset($_COOKIE[’email’]) and isset($_COOKIE[‘password’])) or (isset($_SESSION[‘password’]) and isset($_SESSION[’email’]))) and isset($_POST[‘a’])) { include(«baza/baza1.php»); $q=$_POST[‘a’]; $a = strlen($q); $b = $a -3; $qsu = substr($q, -$b, $b); $emailc = $_COOKIE[’email’]; $passwordc=$_COOKIE[‘password’]; $emails = $_SESSION[’email’]; $passwords = $_SESSION[‘password’]; $rezult = mysql_query(«SELECT id FROM noteusers WHERE email=’$emailc’ AND password=’$passwordc’ OR email=’$emails’ AND password=’$passwords’»,$db); $myrow = mysql_fetch_array($rezult); $id = $myrow[‘id’]; //добавить коментрий if (isset($_POST[‘text’]) and isset($_POST[‘a’])) { $text=$_POST[‘text’]; $rezultatv = mysql_query(«INSERT INTO commentsartcles (autor,articleid,text) VALUES (‘$id’,$qsu,’$text’)»); echo json_encode(array(‘rez’=>’done’)); exit(); } //голосовать за стаью if (isset($_POST[‘param’])) { $param=$_POST[‘param’]; $rezultat = mysql_query(«INSERT INTO votearticles (articlesid,user,vote) VALUES ($qsu,’$id’,’$param’)»); } } ?>
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Почему не срабатывает функция
у меня в одном файле на удаление много много функция.. одна из них должна удалять собщения функция.

Почему не срабатывает функция .next()?
Всем привет, помогите понять, чего не срабатывает жКверивская функция .next() window.setPercents.

Почему не срабатывает функция TRIM?
Добрый день! Есть запрос, в котором происходит запись в курсор айдишника(work_id) и значения.

Почему не срабатывает SQL запрос в VBA?
Уже второй час сижу с ним — не могу понять проблемы. Смотрите: var = Me.ИД_Пользователя Set rst.

Источник: www.cyberforum.ru

Ошибка при отправке ajax-запроса

Мое первое беспокойство, могу ли я отправить более одного предложения о местоположении?
второй
Во-вторых, почему ошибка в этой конкретной строке?

Заранее спасибо за помощь.

Решение

Вы объявляете свои переменные правильно. Var — это языковая конструкция, которая объявляет следующее как переменную. Либо измените код, чтобы использовать точки с запятой в конце каждого оператора var следующим образом:

var value_0 = $(‘input[name=nome]’).val(); var value_1 = $(‘input[name=email]’).val();

или удалите все, кроме первого оператора var, следующим образом:

var value_0 = $(‘input[name=nome]’).val(), value_1 = $(‘input[name=email]’).val(), value_2 = $(‘input[name=contacto]’).val();

Другие решения

Других решений пока нет …

Источник: web-answers.ru

jQuery Ajax — события успеха и ошибки

Использовать будем $.ajax(), перед тем как писать скрипт, не забываем подключать jQuery.
Основа нашего скрипта будет выглядеть так:

$(‘.price-table’).on(‘click’, ‘.btn-item-add’, function()< $.ajax(<>); return false; >);

В данном коде мы видим, что по клику на кнопку с классом .btn-item-add, у которой кстати должен быть родитель с классом .price-table, мы вызываем аякс (пока что безе параметров для более простого понимания). return false — дописываем на случай если наша кнопка сделана через тег .

Теперь добавим события и базовые параметры:

//AJAX ADD TO CART $(‘.price-table’).on(‘click’, ‘.btn-item-add’, function()< var $id = $(this).data(‘id’), $thisBut = $(this), $count = $(this).prev(‘.quant-block’).find(‘.pr-item-quant’).val(); $.ajax(< url: ‘/include/ajax_cart.php’, type: ‘get’, cache: false, data: ‘id=’+$id+’).done(function(data)< //смотрим какой ответ отправляется в случае успеха console.log(data); >).complete(function()< // после того как аякс выполнился >).error(function()< // пишем ошибку в консоль если что-то пошло не так console.log(‘There was an error’); >); return false; >);

В самом начале добавились параметры, а для аякса прописали параметры: url, type, cache и data. Обратите внимание что мы передаем параметры, а в PHP $_GET в дальнейшем можно их обработать. Ссылку указываем относительно корня сайта.

Для примера у нас есть 3 jQuery события — done, complete и error. Отличие done от complete лишь в том что done вызывается первым. Таким образом мы можем в первой функции выполнить запрос, а во второй делать что душе угодно .

Как вызвать 2 аякса подряд при помощи jQuery

Рассмотрим код посложнее. По клику у нас появляется прелоадер по середине экрана.

//AJAX ADD TO CART $(‘.price-table’).on(‘click’, ‘.btn-item-add’, function() ‘); var $id = $(this).data(‘id’), $thisBut = $(this), $count = $(this).prev(‘.quant-block’).find(‘.pr-item-quant’).val(); $.ajax(< url: ‘/include/ajax_cart.php’, type: ‘get’, cache: false, data: ‘id=’+$id+’).done(function(data)< $(‘#bid4’).html(data); >).complete(function()< $.ajax(< url: ‘/include/ajax_cart_big.php’, type: ‘get’, cache: false, data: false, >).done(function(data)< $(‘#bid2’).html(data); >); $(‘.ajax-preload’).remove(); $(‘body’).append(‘Товар добавлен в корзину’); $(‘.tooltip’).animate(< top: ’20px’ >, 1500).fadeOut(1500); >).error(function()< console.log(‘There was an error’); >); return false; >);

Затем наши знакомые параметры ($id, $thisBut, $count). В функции .complete записываем вызов еще одного ajax запроса. Также убираем наш прелоадер. Таким образом можно выиграть немного времени при загрузке данных.

Весь код разбирать не будем, т.к. статья и так получилась больше чем предполагалось, но я надеюсь что вы всё поняли .

UPDATE 23.10.2018

Как передать файл через ajax:

Источник: forwww.com

Handling Ajax errors with jQuery.

This is a tutorial on how to handle errors when making Ajax requests via the jQuery library. A lot of developers seem to assume that their Ajax requests will always succeed. However, in certain cases, the request may fail and you will need to inform the user.

Here is some sample JavaScript code where I use the jQuery library to send an Ajax request to a PHP script that does not exist:

If you look at the code above, you will notice that I have two functions:

• success: The success function is called if the Ajax request is completed successfully. i.e. If the server returns a HTTP status of 200 OK. If our request fails because the server responded with an error, then the success function will not be executed.
• error: The error function is executed if the server responds with a HTTP error. In the example above, I am sending an Ajax request to a script that I know does not exist. If I run the code above, the error function will be executed and a JavaScript alert message will pop up and display information about the error.

The Ajax error function has three parameters:

In truth, the jqXHR object will give you all of the information that you need to know about the error that just occurred. This object will contain two important properties:

• status: This is the HTTP status code that the server returned. If you run the code above, you will see that this is 404. If an Internal Server Error occurs, then the status property will be 500.
• statusText: If the Ajax request fails, then this property will contain a textual representation of the error that just occurred. If the server encounters an error, then this will contain the text “Internal Server Error”.

Obviously, in most cases, you will not want to use an ugly JavaScript alert message. Instead, you would create an error message and display it above the Ajax form that the user is trying to submit.

JQuery 3.0: The error, success and complete callbacks are deprecated.

Update: As of JQuery 3.0, the success, error and complete callbacks have all been removed. As a result, you will have to use the done, fail and always callbacks instead.

An example of done and fail being used:

Note that always is like complete, in the sense that it will always be called, regardless of whether the request was successful or not.

Hopefully, you found this tutorial to be useful.

One thought on “ Handling Ajax errors with jQuery. ”

thanks its helpful 🙂 many of us not aware of error block in ajax

Источник

AJAX: Шпаргалка по AJAX на jQuery

Всем привет в новой записи мы с вами разберём основные функции для Ajax запросов, которые позволяют передавать информацию с сайта в PHP скрипт без перезагрузки страницы.

Для работы Ajax запросов вам нужно подключить jQuery к вашему проекту. Ссылку на jQuery вы можете найти здесь.

Данный взяты с моего сайта Prog-Time.

Стандартная отправка данных через Ajax.

Отправка POST запроса через Ajax

Для отправки POST запроса используем подобный код, меняем только параметр method

Отправка JSON данных через Ajax

Для отправки JSON данный через AJAX можно использовать только методом GET.

Запланировать выполнение JS скрипта

После выполнения данного запроса, скрипт указанный в параметре url сразу будет выполнен.

Сокращённые виды функций для Ajax запросов

Сокращённая версия запроса на выполнение JS скрипта

Обработка ошибок связанных с AJAX запросом

7 Основные параметры для работы с AJAX функциями

Все параметры для отправки AJAX запросов

async (по умолчанию: true).Тип: Boolean.По умолчанию, все запросы отправляются асинхронно и не задерживают работу других JS скриптов (это значение true), для того чтобы ждать пока выполниться Ajax запрос – поставьте значение false.Обратите внимание, что кроссдоменные запросы и элемент, параметр dataType которого имеет значение “jsonp” не поддерживают запросы в синхронном режиме. Учтите, что используя синхронные запросы вы можете временно заблокировать браузер отключив какие-либо действия пока запрос будет активен.

beforeSendФункция обратного вызова, которая будет вызвана перед осуществлением AJAX запроса. Функция позволяет изменить объект jqXHR (в jQuery 1.4.х объект XMLHTTPRequest) до его отправки. Объект jqXHR это надстройка расширяющая объект XMLHttpRequest, объект содержит множество свойств и методов, которые позволяет получить более полную информацию об ответе сервера, а так же объект содержит Promise методы. Если функция beforeSend возвращает false, то AJAX запрос будет отменен. Начиная с версии jQuery 1.5 функция beforeSend будет вызываться независимо от типа запроса.

cache (по умолчанию: true, для dataType “script” и “jsonp” false).Тип: Boolean.Если задано значение false, то это заставит запрашиваемые страницы не кэшироваться браузером. Обратите внимание, что значение false будет правильно работать только с HEAD и GET запросами.

complete.Тип: Function( jqXHR jqXHR, String textStatus ).Функция, которая вызывается, когда запрос заканчивается (функция выполняется после AJAX событий “success” или “error”). В функцию передаются два параметра: jqXHR (в jQuery 1.4.х объект XMLHTTPRequest) и строка соответствующая статусу запроса (“success”, “notmodified”, “nocontent”, “error”, “timeout”, “abort”, или “parsererror”). Начиная с версии jQuery 1.5 параметр complete может принимать массив из функций, которые будут вызываться по очереди.

contents.Тип: PlainObject.Объект состоящий из пар строка/регулярное выражение, определяющих, как jQuery будет обрабатывать (парсить) ответ в зависимости от типа содержимого. Добавлен в версии jQuery 1.5.

contentType (по умолчанию: “application/x-www-form-urlencoded; charset=UTF-8”).Тип: Boolean, или String.Определяет тип содержимого, которое указывается в запросе при передаче данных на сервер. С версии с jQuery 1.6 допускается указать значение false, в этом случае jQuery не передает в заголовке поле Content-Type совсем.

context.Тип: PlainObject.При выполнении AJAX функций обратного вызова контекстом их выполнения является объект window. Параметр context позволяет настроить контекст исполнения функции таким образом, что $( this ) будет ссылаться на определенный DOM элемент, или объект.

crossDomain (по умолчанию: false для запросов внутри того же домена, true для кроссдоменных запросов).Тип: Boolean.Если вы хотите сделать кроссдоменный запрос находясь на том же домене (например jsonp-запрос), то установите этот параметр в true. Это позволит, к примеру, сделать перенаправление запроса на другой домен с вашего сервера. Добавлен в версии jQuery 1.5.

data.Тип: PlainObject, или String, или Array.Данные, которые будут отправлены на сервер. Если они не является строкой, то преобразуются в строку запроса. Для GET запросов строка будет добавлена к URL. Для того, чтобы предотвратить автоматическую обработку вы можете воспользоваться параметром processData со значением false. Если данные передаются в составе объекта, то он должен состоять из пар ключ/значение. Если значение является массивом, то jQuery сериализует несколько значений с одним и тем же ключом (в зависимости от значения параметра traditional, который позволяет задействовать традиционный тип сериализации основанный на методе $.param).

dataFilter.Тип: Function( String data, String type ) => Anything.Функция вызывается после успешного выполнения AJAX запроса и позволяет обработать “сырые” данные, полученные из ответа сервера. Возврат данных должен происходить сразу после их обработки. Функция принимает два аргумента: data – данные полученные от сервера в виде строки и type – тип этих данных (значение параметра dataType).

dataType (по умолчанию: xml, json, script, или html ).Тип: String.Определяет тип данных, который вы ожидаете получить от сервера. Если тип данных не указан, то jQuery будет пытаться определить его на основе типа MIME из ответа (XML тип MIME приведет к получению XML, с версии jQuery 1.4 json будет давать объект JavaScript, script будет выполнять скрипт, а все остальное будет возвращено в виде строки).Основные типы (результат передается в качестве первого аргумента в функцию обратного вызова success):

“xml” – возвращает XML документ, который может быть обработан с помощью jQuery.

“html” – возвращает HTML как обычный текст, теги

Источник

Как использовать AJAX в PHP и jQuery

Сегодня мы собираемся исследовать концепцию AJAX с PHP. Техника AJAX помогает вам улучшить пользовательский интерфейс вашего приложения и улучшить общее восприятие конечного пользователя.

Что такое AJAX?

AJAX расшифровывается как асинхронный JavaScript и XML и позволяет асинхронно извлекать контент с внутреннего сервера без обновления страницы. Таким образом, он позволяет обновлять содержимое веб-страницы без перезагрузки.

Давайте рассмотрим пример, чтобы понять, как вы можете использовать AJAX в повседневной разработке приложений. Скажем, вы хотите создать страницу, которая отображает информацию профиля пользователя, с различными разделами, такими как личная информация, социальная информация, уведомления, сообщения и так далее.

Обычный подход заключается в создании различных веб-страниц для каждого раздела. Так, например, пользователи кликают по ссылке социальной информации, чтобы перезагрузить браузер и отобразить страницу с социальной информацией. Это замедляет навигацию между разделами, поскольку пользователю приходится ждать перезагрузки браузера и повторного отображения страницы каждый раз.

С другой стороны, вы также можете использовать AJAX для создания интерфейса, который загружает всю информацию без обновления страницы. В этом случае вы можете отобразить разные вкладки для всех разделов, и, нажав на вкладку, он извлекает соответствующее содержимое с внутреннего сервера и обновляет страницу, не обновляя браузер. Это поможет вам улучшить общее восприятие конечного пользователя.

Общий вызов AJAX работает примерно так:

Давайте быстро пройдемся по обычному потоку AJAX:

1. Сначала пользователь, как обычно, открывает веб-страницу синхронным запросом.
2. Затем пользователь нажимает на элемент DOM — обычно кнопку или ссылку — который инициирует асинхронный запрос к серверу. Конечный пользователь не заметит этого, поскольку вызов выполняется асинхронно и не обновляет браузер. Однако вы можете распознать эти AJAX-вызовы с помощью такого инструмента, как Firebug.
3. В ответ на запрос AJAX сервер может вернуть данные строки XML, JSON или HTML.
4. Данные ответа анализируются с использованием JavaScript.
5. Наконец, проанализированные данные обновляются в DOM веб-страницы.

Итак, как вы можете видеть, веб-страница обновляется данными в реальном времени с сервера без перезагрузки браузера.

В следующем разделе мы расскажем, как реализовать AJAX с использованием ванильного JavaScript.

Как AJAX работает с использованием Vanilla JavaScript

В этом разделе мы увидим, как AJAX работает в обычном JavaScript. Конечно, есть доступные библиотеки JavaScript, которые облегчают выполнение AJAX-вызовов, но всегда интересно знать, что происходит внутри.

Давайте посмотрим на следующий ванильный код JavaScript, который выполняет вызов AJAX и асинхронно получает ответ от сервера.

Давайте пройдемся по приведенному выше коду, чтобы понять, что происходит за кулисами.

1. Сначала мы инициализируем объект XMLHttpRequest , который отвечает за выполнение вызовов AJAX.
2. У объекта XMLHttpRequest есть свойство readyState , и значение этого свойства изменяется в течение жизненного цикла запроса. Оно может содержать одно из четырех значений: OPENED , HEADERS_RECEIVED , LOADING и DONE .
3. Мы можем настроить функцию-обработчик для изменений состояния, используя свойство onreadystatechange . И это то, что мы сделали в приведенном выше примере: мы использовали функцию, которая будет вызываться каждый раз при изменении свойства состояния.
4. В этой функции мы проверили, равно ли значение readyState 4 , что означает, что запрос завершен, и мы получили ответ от сервера. Затем мы проверили, равен ли код состояния 200 , что означает, что запрос был успешным. Наконец, мы получаем ответ, который хранится в свойстве responseText объекта XMLHttpRequest .
5. После настройки обработчика мы инициируем запрос, вызывая метод open объекта XMLHttpRequest . Значение свойства readyState будет установлено равным 1 после этого вызова.
6. Наконец, мы вызвали метод send объекта XMLHttpRequest , который фактически отправляет запрос на сервер. Значение свойства readyState будет установлено равным 2 после этого вызова.
7. Когда сервер отвечает, он в конечном итоге установит значение readyState равным 4, и вы должны увидеть окно предупреждения, отображающее ответ от сервера.

Вот как AJAX работает с ванильным JavaScript. Конечно, это был очень простой пример для демонстрации концепции AJAX, и в реальном приложении все может быть довольно сложно, так как вам нужно обработать многие различные сценарии успеха и неудач. Таким образом, было бы неплохо выбрать библиотеку JavaScript, которая скрывает специфические сложности браузера!

В следующем разделе мы увидим, как использовать библиотеку jQuery для выполнения вызовов AJAX.

Как работает AJAX с использованием библиотеки jQuery

В предыдущем разделе мы обсуждали, как можно выполнять вызовы AJAX, используя ванильный JavaScript. В этом разделе мы будем использовать библиотеку jQuery, чтобы продемонстрировать это. Я предполагаю, что вы знаете основы библиотеки jQuery.

Библиотека jQuery предоставляет несколько различных методов для выполнения вызовов AJAX, хотя здесь мы рассмотрим стандартный метод ajax , который используется чаще всего.

Посмотрите на следующий пример.

Как вы уже знаете, знак $ используется для ссылки на объект jQuery.

Первым параметром метода ajax является URL-адрес, который будет вызываться в фоновом режиме для получения содержимого со стороны сервера. Второй параметр имеет формат JSON и позволяет указывать значения для некоторых различных параметров, поддерживаемых методом ajax .

В большинстве случаев вам нужно будет указывать функции обратного вызова (коллбеки) для успешного выполнения и для ошибок. Функция обратного вызова для успеха будет вызвана после успешного завершения вызова AJAX. Ответ, возвращенный сервером, будет передан коллбеку для успеха. С другой стороны, коллбек для ошибки будет вызван, если что-то пойдет не так, и возникла проблема при выполнении вызова AJAX.

Итак, как вы можете видеть, AJAX-операции легко выполнять с помощью библиотеки jQuery. Фактически, процесс более или менее одинаков, независимо от библиотеки JavaScript, с которой вы решаете выполнять вызовы AJAX.

В следующем разделе мы увидим реальный пример, чтобы понять, как все это работает с PHP.

Реальный пример AJAX с PHP

В этом разделе мы создадим пример, который извлекает контент JSON из файла PHP на стороне сервера, используя AJAX.

Для демонстрации мы создадим пример, который выполняет вход пользователя с использованием AJAX и jQuery. Для начала давайте создадим файл index.php, как показано в следующем фрагменте, который отображает базовую форму входа.

Файл index.php представляет собой довольно стандартную HTML-форму, которая содержит поля имени пользователя и пароля. Он также содержит фрагмент JavaScript jQuery, который следует схеме, которую мы видели выше.

Мы использовали событие submit элемента формы, которое будет срабатывать, когда пользователь нажимает кнопку отправки. В этом обработчике событий мы инициировали вызов AJAX, который отправляет данные формы в файл login.php, используя метод POST асинхронно. Получив ответ от сервера, мы анализируем его, используя метод parse объекта JSON . И наконец, основываясь на успехе или неудаче, мы предпринимаем соответствующие действия.

Давайте также посмотрим, как выглядит login.php.

Файл login.php содержит логику аутентификации пользователей и возвращает ответ JSON, основанный на успешном или неудачном входе в систему.

Заключение

В этом уроке мы обсудили основы AJAX и его работу в PHP. В первой половине статьи мы рассмотрели, как AJAX работает в ванильном JS и в библиотеке jQuery. Во второй половине мы создали реальный пример, который продемонстрировал, как вы можете использовать AJAX для извлечения PHP содержимого на стороне сервера.

Если у вас есть какие-либо сомнения или вопросы, не стесняйтесь выражать свои мысли, используя канал ниже!

Источник

Добрый вечер дорогие форумчане. Подскажите пожалуйста, почему при попытке отправить ajax запрос, у меня выскакивает alert из error??? Всю голову уже сломал, весь интернет уже перерыл.
2) И почему после того как я нажимаю ок в alert у меня перезагружается страница??

шаблон

{% extends "crm/main_struct.html" %}
{% load staticfiles %}

{% block content %}

<!--ОБЯЗАТЕЛЬНО СДЕЛАТЬ ФУНКЦИЮ НА JS КОТОРАЯ БУДЕТ ВЫЧИСЛЯТЬ ОТСТУПЫ И В НУЖНОЕ МЕСТО ПИХАТЬ КОНТЕНТ САЙТОВ-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script>
$(document).ready(function() {
  $('ul.tabs_m_w').each(function() {
    $(this).find('li').each(function(i) {
      $(this).click(function() {
        $(this).addClass('active').siblings().removeClass('active');
        var p = $(this).parents('div.tabs_container_m_w');
        p.find('div.tab_container_m_w').hide();
        p.find('div.tab_container_m_w:eq(' + i + ')').show();
      });
    });
  });
})
</script>
<a href="{{url}}/crm/my_work/new/" class="add_notebook_a">
    <div class="add_notebook">Добавить</div>
</a>
<div class="tabs_container_m_w">
  <ul class="tabs_m_w">
      {% for notebook in notebookList %}
        <li class="inl-bl_m_w">
            <div class="m_w_list_head">{{notebook.name}}</div>
            <div class="m_w_list_date">{{notebook.date_firstly}}</div>
            <div class="m_w_list_kr_info">{{notebook.kr_info}}</div>
        </li>
      {% endfor %}
  </ul>

    {% for notebook in notebookList %}
  <div class="tab_container_m_w">
      <a href="" onclick="resend({{notebook.id}});" class="a_tab">
          <div class="m_w_save">
            Сохранить
          </div>
      </a>
    <div class="m_w_info_head" id="name{{notebook.id}}" contentEditable="true">{{notebook.name}}</div>
      <div class="m_w_info_info" id="info{{notebook.id}}" contentEditable="true">{{notebook.information}}</div>
  </div>
{% endfor %}

</div>

<script>
    function resend(pk){
           var name = document.getElementById('name' + pk).innerHTML.trim().replace(/<.*?>/g, "");
           var info = document.getElementById('info' + pk).innerHTML.trim().replace(/<.*?>/g, "");
           edit(name, info, pk);
    }
</script>

<script>
function edit(name, info, pk) {
// Если поля заполнены, отправляем их значения
        $.ajax({
            error: function() {
                alert('Ошибка получения запроса');
            },
    // При успехе очищаем поля и меняем кнопочку
                success: function(data) {
                 alert("Успех"); // для проверки, что скрипт работает
                },
    // CSRF механизм защиты Django
                beforeSend: function(xhr, settings) {
                    console.log('-------------before send--');
                    function getCookie(name) {
                        var cookieValue = null;
                        if (document.cookie && document.cookie != '') {
                            var cookies = document.cookie.split(';');
                            for (var i = 0; i < cookies.length; i++) {
                                var cookie = jQuery.trim(cookies[i]);
                                // Does this cookie string begin with the name we want?
                            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                                break;
                            }
                        }
                    }
                    return cookieValue;
                    }
                    if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
                        // Only send the token to relative URLs i.e. locally.
                        xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
                    }
                }
            });// ajax


        return false;
    };
</script>
{% endblock %}

urls.py

urlpatterns = patterns('',
    url(r'^my_work/edit/$', views.NBEdit, name='crm_edit_NB'),
)

views.py

def NBEdit(request):
    if request.is_ajax():
        for i in MyDela.objects.filter(pk=request.POST.get("id", "")):
            i.name = request.POST.get("name", "")[:250]
            i.information = request.POST.get("info", "")
            i.save()
        #  return HttpResponse("ok")
        return HttpResponseRedirect('/crm/sites/')
    else:
        #  return HttpResponse("bad")
        return HttpResponseRedirect('/crm/zayvki/')

Прошу не кидаться помидорами, я только учусь кодить))

This is a tutorial on how to handle errors when making Ajax requests via the jQuery library. A lot of developers seem to assume that their Ajax requests will always succeed. However, in certain cases, the request may fail and you will need to inform the user.

Here is some sample JavaScript code where I use the jQuery library to send an Ajax request to a PHP script that does not exist:

$.ajax({
     url: 'does-not-exist.php',
     success: function(returnData){
         var res = JSON.parse(returnData);
     },
     error: function(xhr, status, error){
         var errorMessage = xhr.status + ': ' + xhr.statusText
         alert('Error - ' + errorMessage);
     }
});

If you look at the code above, you will notice that I have two functions:

• success: The success function is called if the Ajax request is completed successfully. i.e. If the server returns a HTTP status of 200 OK. If our request fails because the server responded with an error, then the success function will not be executed.
• error: The error function is executed if the server responds with a HTTP error. In the example above, I am sending an Ajax request to a script that I know does not exist. If I run the code above, the error function will be executed and a JavaScript alert message will pop up and display information about the error.

The Ajax error function has three parameters:

• jqXHR
• textStatus
• errorThrown

In truth, the jqXHR object will give you all of the information that you need to know about the error that just occurred. This object will contain two important properties:

• status: This is the HTTP status code that the server returned. If you run the code above, you will see that this is 404. If an Internal Server Error occurs, then the status property will be 500.
• statusText: If the Ajax request fails, then this property will contain a textual representation of the error that just occurred. If the server encounters an error, then this will contain the text “Internal Server Error”.

Obviously, in most cases, you will not want to use an ugly JavaScript alert message. Instead, you would create an error message and display it above the Ajax form that the user is trying to submit.

JQuery 3.0: The error, success and complete callbacks are deprecated.

Update: As of JQuery 3.0, the success, error and complete callbacks have all been removed. As a result, you will have to use the done, fail and always callbacks instead.

An example of done and fail being used:

$.ajax("submit.php")
  .done(function(data) {
      //Ajax request was successful.
  })
  .fail(function(xhr, status, error) {
      //Ajax request failed.
      var errorMessage = xhr.status + ': ' + xhr.statusText
      alert('Error - ' + errorMessage);
})

Note that always is like complete, in the sense that it will always be called, regardless of whether the request was successful or not.

Hopefully, you found this tutorial to be useful.

Ошибка означает, что на запрос AJAX (т.е. отложенная загрузка) был возвращен недопустимый ответ. Обычно это вызвано ошибкой или конфликтом AJAX в вашей теме или другом плагине, который мешает выводу запроса AJAX.

Оператор RxJS ajax() — это оператор создания, используемый для создания наблюдаемого для запроса Ajax либо с объектом запроса с URL-адресом, заголовками и т. д., либо со строкой для URL-адреса. Другими словами, мы можем сказать, что оператор RxJS ajax() делает запрос ajax для данного URL-адреса. Мы должны сначала импортировать ajax для работы с ним.

Когда есть ответ об ошибке AJAX или время ожидания запроса AJAX, вы захотите зарегистрировать столько информации, сколько у вас есть, включая сообщение об ошибке, которое дает вам jQuery, URL-адрес и данные запроса. $. ajax(url, { «data»: requestData, «type»: «POST», «timeout»: 5000 }) .