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
При отправке формы применяется функция serialize()
, подробнее на jquery.com.
Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива – {login: 'ЗНАЧЕНИЯ_ПОЛЯ', password: 'ЗНАЧЕНИЯ_ПОЛЯ'}
.
Особенности serialize()
:
- Кнопки формы по которым был клик игнорируются, в результате функции их не будет.
- serialize можно применить только к тегу form и полям формы, т.е.
$('div.form_container').serialize();
– вернет пустой результат.
Пример отправки и обработки формы:
<div class="form_container">
<div id="message"></div>
<form id="form">
<input type="text" name="login">
<input type="text" name="password">
<input type="submit" name="send" value="Отправить">
</form>
</div>
<script>
$("#form").on("submit", function(){
$.ajax({
url: '/handler.php',
method: 'post',
dataType: 'html',
data: $(this).serialize(),
success: function(data){
$('#message').html(data);
}
});
});
</script>
HTML
Код файла handler.php
if (empty($_POST['login'])) {
echo 'Укажите логин';
} elseif (empty($_POST['password'])) {
echo 'Укажите пароль';
} else {
echo 'Авторизация...';
}
PHP
4
Работа с JSON
Идеальный вариант когда нужно работать с массивами данных.
$.ajax({
url: '/json.php',
method: 'get',
dataType: 'json',
success: function(data){
alert(data.text); /* выведет "Текст" */
alert(data.error); /* выведет "Ошибка" */
}
});
JS
Короткая версия
$.getJSON('/json.php', function(data) {
alert(data.text);
alert(data.error);
});
JS
$.getJSON
передает запрос только через GET.
Код файла json.php
header('Content-Type: application/json');
$result = array(
'text' => 'Текст',
'error' => 'Ошибка'
);
echo json_encode($result);
PHP
Возможные проблемы
При работе с JSON может всплыть одна ошибка – после запроса сервер отдал результат, все хорошо, но метод success
не срабатывает. Причина кроется в серверной части (PHP) т.к. перед данными могут появится управляющие символы, например:
Из-за них ответ считается не валидным и считается как ошибочный запрос.
В таких случаях помогает очистка буфера вывода ob_end_clean
(если он используется на сайте).
...
// Очистка буфера
ob_end_clean();
header('Content-Type: application/json');
echo json_encode($result, JSON_UNESCAPED_UNICODE);
exit();
PHP
5
Выполнение JS загруженного через AJAX
В JQuery реализована функция подгруздки кода JS через AJAX, после успешного запроса он будет сразу выполнен.
$.ajax({
method: 'get',
url: '/script.js',
dataType: "script"
});
JS
Или
$.getScript('/script.js');
JS
6
Дождаться выполнения AJAX запроса
По умолчанию в JQuery AJAX запросы выполняются асинхронно. Т.е. запрос не задерживает выполнение программы пока ждет результатов, а работает параллельно.
Простой пример:
var text = '';
$.ajax({
url: '/index.php',
method: 'get',
dataType: 'html',
success: function(data){
text = data;
}
});
alert(text); /* Переменная будет пустая. */
JS
Переменная text
будет пустая, а не как ожидается текст который вернул index.php
Чтобы включить синхронный режим нужно добавить параметр async: false
.
Соответственно синхронный запрос будет вешать прогрузку страницы если код выполняется в <head>
страницы.
var text = '';
$.ajax({
url: '/index.php',
method: 'get',
dataType: 'html',
async: false,
success: function(data){
text = data;
}
});
alert(text); /* В переменной будет результат из index.php. */
JS
7
Отправка HTTP заголовков
Через AJAX можно отправить заголовки HEAD, они указываются в параметре headers
.
$.ajax({
url: '/index.php',
method: 'get',
dataType: 'html',
headers: {'Token_value': 123},
success: function(data){
console.dir(data);
}
});
JS
В PHP они будут доступны в массиве $_SERVER
, ключ массива переводится в верхний регистр с приставкой HTTP_
, например:
<?php
echo $_SERVER['HTTP_TOKEN_VALUE']; // 123
PHP
8
Обработка ошибок
Через параметр error
задается callback-функция, которая будет вызвана в случаи если запрашиваемый ресурс отдал 404, 500 или другой код.
$.ajax({
url: '/index.php',
method: 'get',
dataType: 'json',
success: function(data){
console.dir(data);
},
error: function (jqXHR, exception) {
if (jqXHR.status === 0) {
alert('Not connect. Verify Network.');
} else if (jqXHR.status == 404) {
alert('Requested page not found (404).');
} else if (jqXHR.status == 500) {
alert('Internal Server Error (500).');
} else if (exception === 'parsererror') {
alert('Requested JSON parse failed.');
} else if (exception === 'timeout') {
alert('Time out error.');
} else if (exception === 'abort') {
alert('Ajax request aborted.');
} else {
alert('Uncaught Error. ' + jqXHR.responseText);
}
}
});
JS
Через $.ajaxSetup
можно задать обработчик ошибок для всех AJAX-запросов на сайте.
$.ajaxSetup({
error: function (jqXHR, exception) {
...
}
});
JS
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.
- JQuery 3.0: The error, success and complete callbacks are deprecated.
- One thought on “ Handling Ajax errors with jQuery. ”
- AJAX: Шпаргалка по AJAX на jQuery
- Стандартная отправка данных через Ajax.
- Отправка POST запроса через Ajax
- Отправка JSON данных через Ajax
- Запланировать выполнение JS скрипта
- Сокращённые виды функций для Ajax запросов
- Обработка ошибок связанных с AJAX запросом
- 7 Основные параметры для работы с AJAX функциями
- Как использовать AJAX в PHP и jQuery
- Что такое AJAX?
- Как AJAX работает с использованием Vanilla JavaScript
- Как работает AJAX с использованием библиотеки jQuery
- Реальный пример AJAX с PHP
- Заключение
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:
- Сначала пользователь, как обычно, открывает веб-страницу синхронным запросом.
- Затем пользователь нажимает на элемент DOM — обычно кнопку или ссылку — который инициирует асинхронный запрос к серверу. Конечный пользователь не заметит этого, поскольку вызов выполняется асинхронно и не обновляет браузер. Однако вы можете распознать эти AJAX-вызовы с помощью такого инструмента, как Firebug.
- В ответ на запрос AJAX сервер может вернуть данные строки XML, JSON или HTML.
- Данные ответа анализируются с использованием JavaScript.
- Наконец, проанализированные данные обновляются в DOM веб-страницы.
Итак, как вы можете видеть, веб-страница обновляется данными в реальном времени с сервера без перезагрузки браузера.
В следующем разделе мы расскажем, как реализовать AJAX с использованием ванильного JavaScript.
Как AJAX работает с использованием Vanilla JavaScript
В этом разделе мы увидим, как AJAX работает в обычном JavaScript. Конечно, есть доступные библиотеки JavaScript, которые облегчают выполнение AJAX-вызовов, но всегда интересно знать, что происходит внутри.
Давайте посмотрим на следующий ванильный код JavaScript, который выполняет вызов AJAX и асинхронно получает ответ от сервера.
Давайте пройдемся по приведенному выше коду, чтобы понять, что происходит за кулисами.
- Сначала мы инициализируем объект XMLHttpRequest , который отвечает за выполнение вызовов AJAX.
- У объекта XMLHttpRequest есть свойство readyState , и значение этого свойства изменяется в течение жизненного цикла запроса. Оно может содержать одно из четырех значений: OPENED , HEADERS_RECEIVED , LOADING и DONE .
- Мы можем настроить функцию-обработчик для изменений состояния, используя свойство onreadystatechange . И это то, что мы сделали в приведенном выше примере: мы использовали функцию, которая будет вызываться каждый раз при изменении свойства состояния.
- В этой функции мы проверили, равно ли значение readyState 4 , что означает, что запрос завершен, и мы получили ответ от сервера. Затем мы проверили, равен ли код состояния 200 , что означает, что запрос был успешным. Наконец, мы получаем ответ, который хранится в свойстве responseText объекта XMLHttpRequest .
- После настройки обработчика мы инициируем запрос, вызывая метод open объекта XMLHttpRequest . Значение свойства readyState будет установлено равным 1 после этого вызова.
- Наконец, мы вызвали метод send объекта XMLHttpRequest , который фактически отправляет запрос на сервер. Значение свойства readyState будет установлено равным 2 после этого вызова.
- Когда сервер отвечает, он в конечном итоге установит значение 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/')
Прошу не кидаться помидорами, я только учусь кодить))
- Связанные категории:
-
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:
Настройка | Тип данных |
acceptsПо умолчанию: зависит от типа данных При выполнении ajax-запроса, в заголовках (header) указываются допустимые типы содержимого, ожидаемого от сервера. Значения этих типов будут взяты из параметра |
объект |
asyncПо умолчанию: true По умолчанию, все запросы отсылаются асинхронно (значение данного параметра true). Если же вам нужны синхронные запросы, то параметру async выставите значение false. Кроссдоменные запросы и dataType: «jsonp» не выполняются в синхронном режиме. Учтите, синхронные запросы могут на время выполнения запроса заблокировать браузер. |
логический |
beforeSend(jqXHR jqXHR, объект settings)Функция, которая будет вызвана непосредственно перед отправкой ajax-запроса на сервер. Она может быть использована для модификации jqXHR-объекта (в ранних версиях, до jQuery 1.4.x использовался XMLHttpRequest). Так же может использоваться для изменения заголовков (headers) и т.д. Объект типа jqXHR и объект настроек, передаются в качестве аргументов. Возврат значения 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По умолчанию: {«* text»: window.String, «text html»: true, «text json»: jQuery.parseJSON, «text xml»: jQuery.parseXML} Определяет, с помощью каких функций будет производиться конвертация значений из одного типа, в другой. (добалено в версии 1.5) |
объект |
crossDomainПо умолчанию: false для одного и того же домена, true для кроссбоменных запросов. Если вы хотите, чтобы выполнить кросс-доменный запрос (например, JSONP) на том же домене, выставите true в настройке crossDomain. Это позволяет, например, сделать серверные перенаправление на другой домен. (добалено в версии 1.5) |
логический |
dataДанные, которые будут переданы на сервер. Если данные не являются строкой, то они конвертируются в строку запроса. Для запросов типа GET данные прикрепляются к URL. Объект должен состоять из пар ключ/значение. Если в значении массив, то jQuery упорядочивает значения в зависимости от настройки traditional. По умолчанию, например, {foo:[«bar1», «bar2»]} превращается в &foo=bar1&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»). К примеру настройка {jsonp:’onJSONPLoad’} преобразуется в часть url строки ‘onJSONPLoad=?’. Начиная с версии 1.5, указание в этом параметре false предотвращает добавление в url дополнительного параметра. В этом случае, необходимо установить значение настройки jsonpCallback. Например так: {jsonp:false, jsonpCallback:»callbackName»}. |
строка |
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. Создав свою функцию, вы берёте на себя всю ответственность за формирование объекта. |
function |
xhrFieldsОбъект вида {имя:значене} для изменения значений соответствующих полей объекта XMLHttpRequest. $.ajax({ url: a_cross_domain_url, xhrFields: { withCredentials: true } }); (добалено в версии 1.5.1) |
map |
Примеры
Сохранить данные на сервере и оповестить об этом пользователя.
$.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" });
SanychBY 39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532 |
||||
1 |
||||
04.06.2013, 19:48. Показов 5666. Ответов 17 Метки нет (Все метки)
Здравствуйте. Есть код
Но по странным причинам срабатывает функция ошибки хотя сам запрос успешно передается(я уверен в это, потому что происходит запись в базу данных)
0 |
странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2 |
|
04.06.2013, 20:30 |
2 |
ну так может в самом articlejs.php какие-то ошибки? в результате ответ не приходит от сервера и ajax обрбатывает запрос как ошибку.
0 |
SanychBY 39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532 |
||||
04.06.2013, 20:36 [ТС] |
3 |
|||
ну так может в самом articlejs.php какие-то ошибки? в результате ответ не приходит от сервера и ajax обрбатывает запрос как ошибку. Сервер отвечает
0 |
Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2 |
||||
04.06.2013, 20:39 |
4 |
|||
посмотрите через хром ответ сервера: правой клавишей «просмотреть код элемента» и далее вкладка Network, после это сделайте действие которое вызывает ваш ajax запрос и если вы отправляете в формате json, то надо получать его так:
1 |
39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532 |
|
04.06.2013, 20:44 [ТС] |
5 |
посмотрите через хром ответ сервера: правой клавишей «просмотреть код элемента» и далее вкладка Network, после это сделайте действие которое вызывает ваш ajax запрос посмотрел Что странно что type text/html
0 |
странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2 |
|
04.06.2013, 20:46 |
6 |
ну все пришло. значит должно работать. Что пишется в алерте?
1 |
SanychBY 39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532 |
||||
04.06.2013, 20:48 [ТС] |
7 |
|||
сделал как Вы сказали но функция ошибки по прежнему срабатывает
0 |
странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2 |
|
04.06.2013, 20:53 |
8 |
Что пишется в алерте? и также посмотрите через браузер что пришло от сервера (кликните по articlejs.php)
1 |
39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532 |
|
04.06.2013, 21:01 [ТС] |
9 |
Что пишется в алерте? Алерт «ошибки»
и также посмотрите через браузер что пришло от сервера (кликните по articlejs.php)
0 |
Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4 |
||||||||||||
04.06.2013, 21:19 |
10 |
|||||||||||
В строке 5 — что за а? Выдаёт синтаксическую ошибку и не число и не строка
XMLHttpRequest — это объект, зачем помещать его val ? Если
Всё работает.
0 |
SanychBY 39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532 |
||||
04.06.2013, 21:22 [ТС] |
11 |
|||
В строке 5 — что за а?
XMLHttpRequest — это объект, зачем помещать его val ? Просто такЯ же только учусь
0 |
Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4 |
||||||||
04.06.2013, 21:27 |
12 |
|||||||
Почему не делаете как Вам говорят, а упорно гнёте свою линию
articlejs.php
1 |
SanychBY 39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532 |
||||
04.06.2013, 21:42 [ТС] |
13 |
|||
data:{text:text,a:’a’} Зачем a в кавычках??? Добавлено через 3 минуты
Почему не делаете как Вам говорят, а упорно гнёте свою линию А Вы объясните где ошибка в моем коде, а потом уже предлагайте свой. Моя ошибка мне более интересна. Тем более что у Вас то же скорее всего ошибка
Не работает
0 |
Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4 |
||||
04.06.2013, 21:43 |
14 |
|||
В том коде, что Вы выложили, нет изначально
Чтобы небыло ошибки я передаю букву ‘a’ — это, в данном случае не суть важно, данные всё равно не обрабатываются в articlejs.php
0 |
39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532 |
|
04.06.2013, 21:46 [ТС] |
15 |
В том коде, что Вы выложили, нет изначально Просто думал что это не столь важно
данные всё равно не обрабатываются в articlejs.php Они обрабатываются и записываются в базу данных на сервере(articlejs.php я тоже не весь код выложил) только вот что то с ajaxом наверно
0 |
Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4 |
||||||||
04.06.2013, 22:00 |
16 |
|||||||
alert(data.rez);
Не работает Работает
Вот тоже самое, но PHP уже такой:
А Вы объясните где ошибка в моем коде, Так объяснили вроде
1 |
39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532 |
|
04.06.2013, 22:42 [ТС] |
17 |
И вы хотите сказать что проблемы из за ответа сервера? Добавлено через 11 минут
Вот тоже самое, но PHP уже такой: если PHP такое то нужно добавить обработчик который разберет строку JSON например JSON.parse()
0 |
SanychBY 39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532 |
||||
05.06.2013, 23:55 [ТС] |
18 |
|||
Вот весь PHP. МОжет это как то поможет
0 |
Возникает ошибка 500 (Internal Server Error) при отправке AJAX запроса, ошибка только при запросе на удаление из базы
Yii::$app->db->createCommand("DELETE FROM `notifications` WHERE `id` = $id")
->queryAll();
При SELECT * FROM и.т.д проблем никаких нет AJAX не выдает ошибок, да и сам запрос на удаление отрабатывает нормально и удаляет столбец в таблице, но AJAX возвращает ошибку 500
В чём может быть проблема? Благодарю!
задан 4 фев 2020 в 11:50
2
Можно проще сделать
Notifications::deleteAll(['id' => $id]);
ответ дан 5 фев 2020 в 15:48
SanyaSanya
743 бронзовых знака
Отменил AJAX и отправил этот запрос через форму из вьюшки в результате получил ошибку на уровне PDO
PDOException
SQLSTATE[HY000]: General error это и была причина 500 (Internal Server Error) в консоли.
Я пока еще не очень понимаю с чем связана эта ошибка, но было явно понятно что дебагер ругается на:
->queryAll();
Старый запрос:
Yii::$app->db->createCommand("DELETE FROM `notifications` WHERE `id` = $id")->queryAll();
Новый рабочий запрос:
Yii::$app->db->createCommand("DELETE FROM `notifications` WHERE `id` = $id")->query();
Ну как, они оба работали, но второй не вызывает ошибку
ответ дан 4 фев 2020 в 14:08
Я работаю над небольшим приложением MVC. и иметь экран (представление), который имеет три частичных представления и каждое частичное представление, каждое из которых имеет текстовые поля и кнопки. Я отправляю информацию о каждом частичном представлении на сервер с помощью Ajax.BeginRequest, который вызывает контроллер / действие.
================== Частичный вид 1 ======
Отправить по нажатию кнопки
@using (Ajax.BeginForm("action1", "contoller1", FormMethod.Post, new AjaxOptions()
{
OnFailure= "OnFailure()",
}
))
================== Частичный вид 2 =======
Отправить по нажатию кнопки
@using (Ajax.BeginForm("action2", "contoller2", FormMethod.Post, new AjaxOptions()
{
OnFailure= "OnFailure()",
}
))
================== Частичный вид 3 =======
Отправить по нажатию кнопки
@using (Ajax.BeginForm("action3", "contoller3", FormMethod.Post, new AjaxOptions()
{
OnFailure= "OnFailure()",
}
))
==========================================
Событие OnFailure () обрабатывается в файле Javascript
function OnFailure()
{
Window.location.href="/Error/Index/-1"
}
(Пожалуйста, игнорируйте синтаксис. У меня есть код на другом компьютере)
Требование: если есть какая-либо ошибка при обработке каких-либо данных частичного просмотра (1/2/3) на стороне сервера при нажатии кнопки. Мы должны перенаправить пользователя на совершенно новую удобную страницу ошибок.
Что я сделал:
onFailure
событие / функция Ajax.BeginReques
t, я использую приведенный выше код для перенаправления в представление индекса контроллера ошибок.
/ Ошибка / Индекс показывает
«При обработке вашего запроса произошла ошибка. Повторите попытку или свяжитесь с администрацией ..»
Фактический выход:
Если отправить PartialView2
данные и есть ошибка. Сообщение об ошибке отображается в partialView
вот так.
================= Частичный вид 1 =======
================== Частичный вид 2 =======
«При обработке вашего запроса произошла ошибка. Повторите попытку или свяжитесь с администрацией ..» ================== Частичное представление 3 =======
Ожидаемый результат:
Затем пользователь должен быть полностью перенаправлен на другую страницу, если есть какая-либо ошибка при обработке любого partialView
через ajax.
** —— Ошибка Индекс-1 ——
При обработке вашего запроса произошла ошибка. Повторите попытку или свяжитесь с администрацией.
**
Как я могу этого добиться?
Возможно, это опечатка, связанная с добавлением кода в вопрос, но если нет, то это определенно будет проблемой. В вашей функции OnFailure
вы выполняете перенаправление с помощью:
Windows.location.href="/Error/Index/-1"
Имя объекта JS — window
, а не Windows
, или вы можете просто оставить его полностью, например:
location.href="/Error/Index/-1"
0
Chris Pratt
2 Сен 2016 в 16:18
Я работаю с небольшим MVC-приложением. и иметь экран (вид), который имеет три частичных представления и каждый частичный вид каждого из некоторых текстовых полей и кнопок. Я отправляю каждую часть информации о просмотре на сервер с помощью Ajax.BeginRequest, который вызывает контроллер/действие.
================== Частичный вид 1 ======
Отправить на кнопочный щелчок
@using (Ajax.BeginForm("action1", "contoller1", FormMethod.Post, new AjaxOptions()
{
OnFailure= "OnFailure()",
}
))
================== Частичный вид 2 =======
Отправить на кнопочный щелчок
@using (Ajax.BeginForm("action2", "contoller2", FormMethod.Post, new AjaxOptions()
{
OnFailure= "OnFailure()",
}
))
================== Частичный вид 3 =======
Отправить на кнопочный щелчок
@using (Ajax.BeginForm("action3", "contoller3", FormMethod.Post, new AjaxOptions()
{
OnFailure= "OnFailure()",
}
))
==========================================
событие OnFailure(), обрабатываемое в файле Javascript
function OnFailure()
{
Window.location.href="/Error/Index/-1"
}
(Пожалуйста, игнорируйте синтаксис. У меня есть код на другой машине)
Требование: при возникновении ошибки при обработке данных Partialview (1/2/3) на стороне сервера при нажатии кнопки. Мы должны перенаправить пользователя на совершенно новую страницу с дружественной ошибкой.
что я сделал: onFailure
event/function от Ajax.BeginReques
t, я использую выше код для перенаправления на представление индекса контроллера ошибок.
/Ошибка/Индекс показывает
«При обработке вашего запроса произошла ошибка. Повторите попытку или обратитесь в администрацию..»
Фактический результат:
Если вы отправляете данные PartialView2
и есть какая-либо ошибка. Отобразится сообщение об ошибке в partialView
.
================= Частичный вид 1 =======
================== Частичный вид 2 =======
«При обработке вашего запроса произошла ошибка. Повторите попытку или обратитесь в администрацию..» ================== Partial View 3 =======
Ожидаемый результат:
Затем пользователь должен быть перенаправлен на другую страницу полностью, если есть какая-либо ошибка при обработке partialView
через ajax.
** ——ErrorIndex-1 ——
При обработке вашего запроса произошла ошибка. Повторите попытку или свяжитесь с администрацией.
**
Как я могу это достичь?
-
rock777
- Сообщения: 9
- Зарегистрирован: 26.04.18 16:49
При попытке подписаться или отписаться от любой из тем (находясь в самой теме), выводится ошибка-ОШИБКА AJAX При обработке запроса произошла ошибка
Отписка от тем или темы в Личном разделе проходит корректно.
Также пользователи жалуются, что ошибка выскакивает и при переходе со страницы на страницу форума.
Такое у меня наблюдается на 2-х форумах версии 3.2.1 , на одном стоит расширение — Быстрый ответ (пробовал его отключать,ничего не изменилось), на другом форуме нет этого расширения совсем.
На всех форумах стоят по 2 темы prosilver и blue_subsilver2
Из за чего это может быть ?
-
Shredder
- Администратор
- Сообщения: 1054
- Зарегистрирован: 22.08.13 09:05
-
Shredder » 03.11.18 23:19
1. Обновитесь до последней версии
2. Попробуйте поочерёдно отключать расширения, чтобы выяснить, из-за какого происходит ошибка
Мои моды и расширения для phpBB
Выполняю работы по phpBB3 на заказ. Пишите в личку или на почту.
Бесплатная поддержка — только в темах.
-
rock777
- Сообщения: 9
- Зарегистрирован: 26.04.18 16:49
rock777 » 04.11.18 19:30
Если отключать расширения в админке,во вкладке — Управление расширениями, то не удалятся настройки,репутации,благодарности и другие данные расширений ?
-
Shredder
- Администратор
- Сообщения: 1054
- Зарегистрирован: 22.08.13 09:05
-
Shredder » 04.11.18 20:09
rock777
Нет, если после этого не нажимать «Удалить данные» около имени расширения. Всё предусмотрено.
Мои моды и расширения для phpBB
Выполняю работы по phpBB3 на заказ. Пишите в личку или на почту.
Бесплатная поддержка — только в темах.
-
rock777
- Сообщения: 9
- Зарегистрирован: 26.04.18 16:49
rock777 » 05.11.18 19:28
Попробовал отключать по одному расширения,после отключения каждого расширения чистил кэш через фтп, ничего не изменилось,все осталось как прежде.
Вот все мои расширения:
Addon for Thanks for posts 3.0.4
Advertisement Management 1.1.0
AntiBot100500 0.0.9
External Links 1.0.5
Forum Sponsor 2.0.4
phpBB3 SEO Sitemap 1.1.1
Reputation System 1.1.0-dev
SEO Topic & Canonical URL 1.0.10
Thanks for posts 2.0.3-dev Информация Отключить
Upload Extensions
Что интересно, когда уведомление об ответе в теме на которую подписан приходит на майл ( Если вы больше не хотите следить за темой, то либо щёлкните по находящейся
в ней ссылке «Отписаться от темы», либо перейдите по следующей ссылке: ), то перейдя по последней ссылке в письме отписаться от темы удается.
-
Shredder
- Администратор
- Сообщения: 1054
- Зарегистрирован: 22.08.13 09:05
-
Shredder » 05.11.18 20:24
Т.е. баг проявляется на чистом phpBB, на родном стиле prosilver и без расширений? Значит, это баг самого phpBB. Обновитесь до 3.2.3. Если баг останется, запостите багрепорт на сайте поддержки.
Мои моды и расширения для phpBB
Выполняю работы по phpBB3 на заказ. Пишите в личку или на почту.
Бесплатная поддержка — только в темах.
-
rock777
- Сообщения: 9
- Зарегистрирован: 26.04.18 16:49
rock777 » 05.11.18 20:53
Shredder писал(а):Т.е. баг проявляется на чистом phpBB, на родном стиле prosilver и без расширений? Значит, это баг самого phpBB. Обновитесь до 3.2.3. Если баг останется, запостите багрепорт на сайте поддержки.
Да, я отключил все расширения и попробовал зайти на форум под стилем prosilver.
А так у меня не чистый prosilver стоит.
Добавлено спустя 17 минут 58 секунд:
Интересно это может быть как то связано с тем,что я недавно форумы переводил на https ?
- Вложения
-
-
Scr01.jpg (78.62 КБ) Просмотров: 907
-
-
Shredder
- Администратор
- Сообщения: 1054
- Зарегистрирован: 22.08.13 09:05
-
Shredder » 06.11.18 18:24
Пробуйте на чистом.
rock777 писал(а):Интересно это может быть как то связано с тем,что я недавно форумы переводил на https ?
Может. Но сначала нужно исключить влияние стиля.
Мои моды и расширения для phpBB
Выполняю работы по phpBB3 на заказ. Пишите в личку или на почту.
Бесплатная поддержка — только в темах.
Я хотел бы поймать ошибку и показать соответствующее сообщение, если запрос Ajax терпит неудачу.
мой код выглядит следующим образом, но мне не удалось поймать неудачный запрос Ajax.
function getAjaxData(id)
{
$.post("status.ajax.php", {deviceId : id}, function(data){
var tab1;
if (data.length>0) {
tab1 = data;
}
else {
tab1 = "Error in Ajax";
}
return tab1;
});
}
я узнал, что» ошибка в Ajax » никогда не выполняется, когда запрос Ajax не удался.
Как я могу обработать ошибку Ajax и показать соответствующее сообщение, если это не удастся?
6 ответов
начиная с jQuery 1.5 вы можете использовать механизм отложенных объектов:
$.post('some.php', {name: 'John'})
.done(function(msg){ })
.fail(function(xhr, status, error) {
// error handling
});
другой способ-использовать .ajax
:
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("some error");
}
});
jQuery 1.5 добавил отложенные объекты, которые прекрасно справляются с этим. Просто позвоните $.post
и прикрепите любые обработчики, которые вы хотите после вызова. Отложенные объекты даже позволяют присоединить несколько обработчиков успеха и ошибок.
пример:
$.post('status.ajax.php', {deviceId: id})
.done( function(msg) { ... } )
.fail( function(xhr, textStatus, errorThrown) {
alert(xhr.responseText);
});
до jQuery 1.8 функция done
называлась success
и fail
называлась error
.
264
автор: 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);
}
});
$.post('someUri', { },
function(data){ doSomeStuff })
.fail(function(error) { alert(error.responseJSON) });
простой способ-реализовать ajaxError:
всякий раз, когда запрос 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.');
}
});
я исправил эту проблему путем объявления datatype: 'json'
в моем вызове jQuery ajax.
0
автор: Eleanor Zimmermann
AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.
Полное описание функции AJAX на jquery.com.
1
GET запрос
Запрос идет на index.php с параметром «text
» и значением «Текст
» через метод GET.
По сути это то же самое что перейти в браузере по адресу – http://site.com/index.php?text=Текст
В результате запроса index.php вернет строку «Данные приняты – Текст», которая будет выведена в сообщении alert.
$.ajax({
url: '/index.php', /* Куда пойдет запрос */
method: 'get', /* Метод передачи (post или get) */
dataType: 'html', /* Тип данных в ответе (xml, json, script, html). */
data: {text: 'Текст'}, /* Параметры передаваемые в запросе. */
success: function(data){ /* функция которая будет выполнена после успешного запроса. */
alert(data); /* В переменной data содержится ответ от index.php. */
}
});
JS
Код можно сократить используя функцию $.get
$.get('/index.php', {text: 'Текст'}, function(data){
alert(data);
});
JS
Код файла index.php
echo 'Данные приняты - ' . $_GET['text'];
PHP
GET запросы могут кэшироваться браузером или сервером, чтобы этого избежать нужно добавить в функцию параметр – cache: false
.
$.ajax({
url: '/index.php',
method: 'get',
cache: false
});
JS
2
POST запросы
$.ajax({
url: '/index.php',
method: 'post',
dataType: 'html',
data: {text: 'Текст'},
success: function(data){
alert(data);
}
});
JS
Или сокращенная версия – функция $.post
$.post('/index.php', {text: 'Текст'}, function(data){
alert(data);
});
JS
Код файла index.php
echo 'Данные приняты - ' . $_POST['text'];
PHP
POST запросы ни когда не кэшироваться.
3
Отправка формы через AJAX
При отправке формы применяется функция serialize()
, подробнее на jquery.com.
Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива – {login: 'ЗНАЧЕНИЯ_ПОЛЯ', password: 'ЗНАЧЕНИЯ_ПОЛЯ'}
.
Особенности serialize()
:
- Кнопки формы по которым был клик игнорируются, в результате функции их не будет.
- serialize можно применить только к тегу form и полям формы, т.е.
$('div.form_container').serialize();
– вернет пустой результат.
Пример отправки и обработки формы:
<div class="form_container">
<div id="message"></div>
<form id="form">
<input type="text" name="login">
<input type="text" name="password">
<input type="submit" name="send" value="Отправить">
</form>
</div>
<script>
$("#form").on("submit", function(){
$.ajax({
url: '/handler.php',
method: 'post',
dataType: 'html',
data: $(this).serialize(),
success: function(data){
$('#message').html(data);
}
});
});
</script>
HTML
Код файла handler.php
if (empty($_POST['login'])) {
echo 'Укажите логин';
} elseif (empty($_POST['password'])) {
echo 'Укажите пароль';
} else {
echo 'Авторизация...';
}
PHP
4
Работа с JSON
Идеальный вариант когда нужно работать с массивами данных.
$.ajax({
url: '/json.php',
method: 'get',
dataType: 'json',
success: function(data){
alert(data.text); /* выведет "Текст" */
alert(data.error); /* выведет "Ошибка" */
}
});
JS
Короткая версия
$.getJSON('/json.php', function(data) {
alert(data.text);
alert(data.error);
});
JS
$.getJSON
передает запрос только через GET.
Код файла json.php
header('Content-Type: application/json');
$result = array(
'text' => 'Текст',
'error' => 'Ошибка'
);
echo json_encode($result);
PHP
Возможные проблемы
При работе с JSON может всплыть одна ошибка – после запроса сервер отдал результат, все хорошо, но метод success
не срабатывает. Причина кроется в серверной части (PHP) т.к. перед данными могут появится управляющие символы, например:
Из-за них ответ считается не валидным и считается как ошибочный запрос.
В таких случаях помогает очистка буфера вывода ob_end_clean
(если он используется на сайте).
...
// Очистка буфера
ob_end_clean();
header('Content-Type: application/json');
echo json_encode($result, JSON_UNESCAPED_UNICODE);
exit();
PHP
5
Выполнение JS загруженного через AJAX
В JQuery реализована функция подгруздки кода JS через AJAX, после успешного запроса он будет сразу выполнен.
$.ajax({
method: 'get',
url: '/script.js',
dataType: "script"
});
JS
Или
$.getScript('/script.js');
JS
6
Дождаться выполнения AJAX запроса
По умолчанию в JQuery AJAX запросы выполняются асинхронно. Т.е. запрос не задерживает выполнение программы пока ждет результатов, а работает параллельно.
Простой пример:
var text = '';
$.ajax({
url: '/index.php',
method: 'get',
dataType: 'html',
success: function(data){
text = data;
}
});
alert(text); /* Переменная будет пустая. */
JS
Переменная text
будет пустая, а не как ожидается текст который вернул index.php
Чтобы включить синхронный режим нужно добавить параметр async: false
.
Соответственно синхронный запрос будет вешать прогрузку страницы если код выполняется в <head>
страницы.
var text = '';
$.ajax({
url: '/index.php',
method: 'get',
dataType: 'html',
async: false,
success: function(data){
text = data;
}
});
alert(text); /* В переменной будет результат из index.php. */
JS
7
Отправка HTTP заголовков
Через AJAX можно отправить заголовки HEAD, они указываются в параметре headers
.
$.ajax({
url: '/index.php',
method: 'get',
dataType: 'html',
headers: {'Token_value': 123},
success: function(data){
console.dir(data);
}
});
JS
В PHP они будут доступны в массиве $_SERVER
, ключ массива переводится в верхний регистр с приставкой HTTP_
, например:
<?php
echo $_SERVER['HTTP_TOKEN_VALUE']; // 123
PHP
8
Обработка ошибок
Через параметр error
задается callback-функция, которая будет вызвана в случаи если запрашиваемый ресурс отдал 404, 500 или другой код.
$.ajax({
url: '/index.php',
method: 'get',
dataType: 'json',
success: function(data){
console.dir(data);
},
error: function (jqXHR, exception) {
if (jqXHR.status === 0) {
alert('Not connect. Verify Network.');
} else if (jqXHR.status == 404) {
alert('Requested page not found (404).');
} else if (jqXHR.status == 500) {
alert('Internal Server Error (500).');
} else if (exception === 'parsererror') {
alert('Requested JSON parse failed.');
} else if (exception === 'timeout') {
alert('Time out error.');
} else if (exception === 'abort') {
alert('Ajax request aborted.');
} else {
alert('Uncaught Error. ' + jqXHR.responseText);
}
}
});
JS
Через $.ajaxSetup
можно задать обработчик ошибок для всех AJAX-запросов на сайте.
$.ajaxSetup({
error: function (jqXHR, exception) {
...
}
});
JS