Добрый вечер дорогие форумчане. Подскажите пожалуйста, почему при попытке отправить 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/')
Прошу не кидаться помидорами, я только учусь кодить))
SanychBY 39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532 |
||||
1 |
||||
04.06.2013, 19:48. Показов 5476. Ответов 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 |
Есть ajax запрос, после отправки которого постоянно вылазит ошибка
$(document).ready(function() {
$('#regForm').submit(function(e) {
var frm = $('#regForm');
e.preventDefault();
var data = {}
var Form = this;
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
$(document).ajaxSend(function(e, xhr, options) {
xhr.setRequestHeader(header, token);
});
$.each(this, function(i, v) {
var input = $(v);
data[input.attr("path")] = input.val();
delete data["undefined"];
});
$.ajax({
contentType : 'application/json; charset=utf-8',
type : frm.attr('method'),
url : frm.attr('action'),
dataType : 'json',
data : JSON.stringify(data),
success : function(data) {
alert(data);
},
error : function(data,status,er) {
alert("error: "+data+" status: "+status+" er:"+er);
}
});
});
});
Вот метод который вызывается
@RequestMapping(value = "/user/register", method = RequestMethod.POST)
public @ResponseBody String createNewUserAccount(
@RequestBody RegistrationForm userForm) {
try {
userService.registerNewUserAccount(userForm);
} catch (DuplicateEmailException e) {
log.error(e.getLocalizedMessage());
return "Error!";
}
return "Success!";
}
Но даже после успешного завершения метода, вылазит вот такая ошибка
data = Object {readyState: 4, responseText: "Success!", status: 200, statusText: "OK"}, status = "parsererror", er = SyntaxError: Unexpected token S at Object.parse (native) at jQuery.extend.parseJSON (http://localhost:8080/static/jquery/jquery-1.10.2.js:550:23) at ajaxConvert (http://localhost:8080/static/jquery/jquery-1.10.2.js:8429:19) at done (http://localhost:8080/static/jquery/jquery-1.10.2.js:8185:15) at XMLHttpRequest.jQuery.ajaxTransport.s.send.callback (http://localhost:8080/static/jquery/jquery-1.10.2.js:8778:8) {message: "Unexpected token S"}
I’m new to Drupal, and I’m working with a Drupal site that someone else wrote. From the admin menu, when I go to Structure -> Pages -> Edit Content -> Gear Menu -> Edit (or Settings), Drupal throws up this error:
«An AJAX HTTP error occurred. HTTP Result Code: 200 Debugging
information follows. Path:
/panels/ajax/editor/edit-pane/panel_context%3Apage-join_step_two%3Apage_join_step_two_panel_context/4
[…] RESPONSE = nullnullnullnullnullnullnullnullfalseCancelled: Error
bad character content for element
‘data_key’________nullnullnullfalsenullnull»
The code is also inserting the line
«RESPONSE = nullnullnullnullnullnullnullnullfalseCancelled: Error bad
character content for element ‘data_key’ ________
nullnullnullfalsenullnull»
at the bottom of every page.
I know that Firebug can cause the Ajax HTTP 200 error, but I don’t have it installed. I’ve spent hours looking through help pages for this error, and nothing has worked. Can you help? Thanks!
Chapabu
13.8k2 gold badges38 silver badges58 bronze badges
asked Aug 13, 2012 at 1:16
we need to uncomment .htaccess file in php_value auto_append_file none may be it work.
in ajax return value must be defined.if not exist show this kind of error.clear cache.
one other solution if you working on the local you need to disable newest module than check it[first you need to take DB backup].
answered Aug 13, 2012 at 7:01
1
-
Just disable recently enabled module. or
-
May be this error comes to the jQuery module 1.8, not come in 1.7 so check it updated or not.
-
Every module start with
<?php
. just check this line.
This seems to have occurred because of a Javascript
conflict with some other module or theme.
Many users solved the issue by doing the following;
-
Removing the Drupal for Firebug addon (This did the trick for a majority of the users who reported the issue).
-
Disabling Firebug.
-
Flushing the theme’s cache.
-
Uninstalling Jquery UI and Jquery Update modules.
-
Removing the Twitter Profile module solved the issue for a small number of users.
-
Disabling the Theme Developer module solved the issues for a user.
WaQaR Ali
1,68812 silver badges23 bronze badges
answered Sep 10, 2014 at 13:04
2
Ajax HTTP 200 error is generic error and there is not enough info to properly solve it.
You’ll need to:
grep -r "find in files" .
in the code base the string data_key
(or whatever is printed) and can then debug from there.
kenorb
13.8k10 gold badges93 silver badges159 bronze badges
answered May 30, 2013 at 7:47
David ThomasDavid Thomas
21.8k2 gold badges29 silver badges68 bronze badges
2
Error bad character content for element
means there is a validation error in your XML while parsing the file or response.
This could be related to some external service or custom module breaking Drupal instance.
The problem can be tracked by looking for some specifics in the database, e.g.:
drush sql-dump --ordered-dump | grep data_key
answered Nov 23, 2015 at 11:17
kenorbkenorb
13.8k10 gold badges93 silver badges159 bronze badges
I’m new to Drupal, and I’m working with a Drupal site that someone else wrote. From the admin menu, when I go to Structure -> Pages -> Edit Content -> Gear Menu -> Edit (or Settings), Drupal throws up this error:
«An AJAX HTTP error occurred. HTTP Result Code: 200 Debugging
information follows. Path:
/panels/ajax/editor/edit-pane/panel_context%3Apage-join_step_two%3Apage_join_step_two_panel_context/4
[…] RESPONSE = nullnullnullnullnullnullnullnullfalseCancelled: Error
bad character content for element
‘data_key’________nullnullnullfalsenullnull»
The code is also inserting the line
«RESPONSE = nullnullnullnullnullnullnullnullfalseCancelled: Error bad
character content for element ‘data_key’ ________
nullnullnullfalsenullnull»
at the bottom of every page.
I know that Firebug can cause the Ajax HTTP 200 error, but I don’t have it installed. I’ve spent hours looking through help pages for this error, and nothing has worked. Can you help? Thanks!
Chapabu
13.8k2 gold badges38 silver badges58 bronze badges
asked Aug 13, 2012 at 1:16
we need to uncomment .htaccess file in php_value auto_append_file none may be it work.
in ajax return value must be defined.if not exist show this kind of error.clear cache.
one other solution if you working on the local you need to disable newest module than check it[first you need to take DB backup].
answered Aug 13, 2012 at 7:01
1
-
Just disable recently enabled module. or
-
May be this error comes to the jQuery module 1.8, not come in 1.7 so check it updated or not.
-
Every module start with
<?php
. just check this line.
This seems to have occurred because of a Javascript
conflict with some other module or theme.
Many users solved the issue by doing the following;
-
Removing the Drupal for Firebug addon (This did the trick for a majority of the users who reported the issue).
-
Disabling Firebug.
-
Flushing the theme’s cache.
-
Uninstalling Jquery UI and Jquery Update modules.
-
Removing the Twitter Profile module solved the issue for a small number of users.
-
Disabling the Theme Developer module solved the issues for a user.
WaQaR Ali
1,68812 silver badges23 bronze badges
answered Sep 10, 2014 at 13:04
2
Ajax HTTP 200 error is generic error and there is not enough info to properly solve it.
You’ll need to:
grep -r "find in files" .
in the code base the string data_key
(or whatever is printed) and can then debug from there.
kenorb
13.8k10 gold badges93 silver badges159 bronze badges
answered May 30, 2013 at 7:47
David ThomasDavid Thomas
21.8k2 gold badges29 silver badges68 bronze badges
2
Error bad character content for element
means there is a validation error in your XML while parsing the file or response.
This could be related to some external service or custom module breaking Drupal instance.
The problem can be tracked by looking for some specifics in the database, e.g.:
drush sql-dump --ordered-dump | grep data_key
answered Nov 23, 2015 at 11:17
kenorbkenorb
13.8k10 gold badges93 silver badges159 bronze badges
Я работаю над небольшим приложением 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
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
Я хотел бы поймать ошибку и показать соответствующее сообщение, если запрос 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
» 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" });
Связанные уроки:
-
Создание простого AJAX сайта с помощью jQuery
В сегодняшнем уроке мы создадим простой сайт с помощью jQuery.
-
Что нового в jQuery 1.5?
Совсем недавно, как и было обещано, группа разработчиков библиотеки jQuery выпустила новую версию своего продукта. Я попытаюсь вам рассказать о фитчах, которые вошли в свежий релиз.