Beforesend ajax не работает

JQuery Ajax beforeSend

У меня есть простой вызов AJAX, который выполняет функцию beforeSend и complete . Они выполняются нормально, но beforeSend «по-видимому» не выполняется до тех пор, пока не будет достигнут успех.

На beforeSend есть уведомление «Пожалуйста, подождите». Если я поставлю разрыв после функции в beforeSend , то она покажет это уведомление, а затем удастся. Без точки останова он будет сидеть и думать в ожидании ответа, а затем на мгновение после моего успеха появится уведомление «Пожалуйста, подождите».

Желаемая функциональность заключается в том, чтобы уведомление появлялось сразу после отправки запроса, чтобы оно отображалось в ожидании ответа.

4 ответа

Ваша проблема — флаг async:false . Помимо того факта, что это плохая практика (и действительно имеет смысл только в очень ограниченном числе случаев), это фактически портит порядок выполнения остальной части кода. Вот почему:

Кажется, что где-то в blockUI коде они устанавливают setTimeout . В результате код blockUI ожидает очень короткое время. Поскольку следующей инструкцией в очереди является вызов ajax() , выполнение blockUI помещается прямо за этим. А поскольку вы используете async:false , он должен дождаться завершения полного ajax вызова, прежде чем его можно будет запустить.

Подробно вот что происходит:

• Вы звоните blockUI
• blockUI имеет setTimeout и выполняется после того, как истекло время ожидания (даже если время ожидания равно 0, следующая строка ajax() будет запущена первой)
• ajax() вызывается с async:false , что означает, что JS останавливает все, пока запрос не вернется
• ajax() успешно возвращается и выполнение JS может продолжаться
• setTimeout внутри blockUI кода, вероятно, закончился, поэтому он будет выполнен следующим
• похоже, blockUI выполняется как часть success , но в действительности он только что был поставлен в очередь из-за тайм-аута

Если бы вы НЕ использовали async:false , выполнение было бы следующим:

• Вы звоните blockUI
• blockUI имеет setTimeout и выполняется после того, как истекло время ожидания (даже если время ожидания равно 0, следующая строка ajax() будет запущена первой)
• ajax() вызывается и отправляет запрос на сервер.
• пока он подключается к серверу, нормальное выполнение JS продолжается
• setTimeout внутри blockUI кода, вероятно, закончился, поэтому он будет выполнен следующим
• blockUI текст появляется
• если где-то больше нет кода JS, выполнение JS выполняется до тех пор, пока не будут выполнены обратные вызовы AJAX success и complete

Вот несколько примеров jsFiddle, чтобы продемонстрировать проблему:

Пример 1. Это ситуация, с которой вы столкнулись. Текст blockUI отображается только после выполнения вызова ajax .

Пример 2. Это та же ситуация, что и у вас, но с alert перед ajax вызов. Поскольку существует alert , время ожидания внутри blockUI помещает внешний вид blockUI текста после alert , а не после ajax .

Пример 3: так должно работать без async:false

Другим подходом может быть перегрузка функции $ .ajax

Не идеально (из-за другого отложенного объекта), но может быть полезным ..

Источник

jQuery ajax beforeSend

I have a simple AJAX call that is executing a function on the beforeSend and on complete . They execute fine but the beforeSend is «seemingly» not executed until after the success.

On the beforeSend there is a «Please wait» notification. If I put a break after the function in the beforeSend then it will show that notification and then hit the success. Without the break point then it will sit there and think while waiting for the response and then my please wait notification will appear for a fraction of a second after the success is hit.

The desired functionality is to have the notification appear as soon as the request is sent so it displays while it is waiting for the response.

4 Answers 4

Your problem is the async:false flag. Besides the fact that it is bad practice (and really only makes sense in a very limited number of cases), it actually messes with the order of execution of the rest of the code. Here is why:

It seems that somewhere in the blockUI code they are setting a setTimeout . As a result, the blockUI code waits a very short amount of time. Since the next instruction in the queue is the ajax() call, the blockUI execution gets placed right behind that. And since you are using async:false , it has to wait until the complete ajax call is completed before it can be run.

In detail, here is what happens:

• You call blockUI
• blockUI has a setTimeout and gets executed after the timeout is done (even if the timeout length is 0, the next line, ajax() will be run first)
• ajax() is called with async:false , which means JS stops everything until the request returns
• ajax() returns successfully and JS execution can continue
• the setTimeout inside blockUI code is probably over, so it will be executed next
• it looks like blockUI runs as part of success , but in reality, it has just been queued up because of a timeout

If you would NOT use async:false , the execution would go as followed:

• You call blockUI
• blockUI has a setTimeout and gets executed after the timeout is done (even if the timeout length is 0, the next line, ajax() will be run first)
• ajax() is called and sends of a request to the server.
• while it is connecting to the server, normal JS execution continues
• the setTimeout inside blockUI code is probably over, so it will be executed next
• the blockUI text shows up
• unless there is more JS code somewhere, JS execution is done until the AJAX success and complete callbacks are executed

Here are some jsFiddle examples to demonstrate the problem:

Example 1: This is the situation you are experiencing. The blockUI text doesn’t show until after the ajax call executes.

Example 2: This is the exact same situation as yours, but with an alert before the ajax call. Because there is an alert , the timeout inside blockUI places the appearance of the blockUI text after the alert instead of after the ajax .

Example 3: This is how it is supposed to work without async:false

Источник

Почему beforeSend в $ ajaxSetup не добавляет параметры к функции без параметров?

Я пытаюсь добавить токен безопасности ко всем моим вызовам AJAX $ .post.

Я настроил токен безопасности на автоматическое добавление с помощью следующего кода

А затем к коду, подобному следующему, будет автоматически добавлен токен безопасности

Код работает хорошо, но не для функций без параметров, таких как

Есть идеи, почему это должно быть?

Я могу исправить это, просто добавив в код фиктивный параметр dummy:1 .

Итак, я попытался сделать

Но это не имитирует добавление dummy=1 вручную, и токен безопасности не был доступен в запросе.

ОБНОВЛЕНИЕ

Оглядываясь назад, я понимаю (после комментария @Rory McCrossan и ответа @Louys Patrice Bessette), что мой вопрос был неполным. Мне также следовало включить в свой вопрос код JSP, который я использую для получения параметра.

2 ответа

После проработки комментария @Rory McCrossan и ответа @Louys Patrice Bessette — большое спасибо — я вижу, что когда beforeSend добавляет в пустой список параметров, то SESSIONID отправляется как часть Request Payload, а когда beforeSend добавляется к pre- существующий список параметров, то SESSIONID отправляется как часть данных формы. Это имеет значение при получении параметров.

Если данные являются частью данных формы, их можно получить следующим образом:

Для данных как части полезной нагрузки запроса они могут быть получены следующими способами: См. Ответ @Fizer Khan в Получение полезных данных запроса из запроса POST в Java сервлет

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

Обратите внимание, что, вероятно, лучший ответ заставит beforeSend отправлять SessionID в данных формы во всех случаях, но на данный момент это хороший обходной путь!

Источник

jQuery ajax beforesend

У меня есть простой вызов ajax, который выполняет функцию на beforeSend и на complete. Они выполняют отлично, но beforeSend «по-видимому» не выполняется до тех пор, пока успех. На перед отправкой есть уведомление» пожалуйста, подождите». Если я поставлю перерыв после функции в beforeSend, то он покажет это уведомление, а затем достигнет успеха. Без точки останова, то он будет сидеть там и думать, ожидая ответа, а затем мой пожалуйста, подождите уведомления появится на долю секунды после того, как успех будет поражен. Желаемая функциональность состоит в том, чтобы уведомление появлялось сразу после отправки запроса, чтобы оно отображалось во время ожидания ответа.

4 ответов

ваша проблема-это async:false флаг. Помимо того, что это плохая практика (и действительно имеет смысл только в очень ограниченном количестве случаев), она фактически вмешивается в порядок выполнения остальной части кода. Вот почему:

кажется, что где-то в blockUI код они задание setTimeout . В результате blockUI код ждет очень короткое время. Поскольку следующая инструкция в очереди — ajax() вызов blockUI выполнение получает прямо за этим. И так как вы используете async:false , Он должен подождать до полного ajax звонок завершен, прежде чем он может быть запущен.

подробно, вот что происходит:

• вы называете blockUI
• blockUI имеет setTimeout и выполняется после завершения тайм-аута (даже если длина тайм-аута равна 0, следующая строка, ajax() будет запущен первым)
• ajax() С async:false , Что означает, что JS останавливает все, пока запрос возвращает
• ajax() возвращает успешно и выполнение JS может продолжаться
• setTimeout внутри blockUI код, вероятно, закончен, поэтому он будет выполнен следующим
• похоже blockUI выполняется как часть success , но на самом деле, он только что был в очереди из-за тайм-аута

если бы вы не использовали async:false , казнь будет идти следующим образом:

• вы называете blockUI
• blockUI имеет setTimeout и выполняется после завершения тайм-аута (даже если длина тайм-аута равна 0, следующая строка, ajax() будет запущен первым)
• ajax() называется и отправляет запрос на сервер.
• пока он подключается к серверу, обычное выполнение JS продолжается
• setTimeout внутри blockUI код, вероятно, закончен, поэтому он будет выполнен следующим
• the blockUI текст появляется
• если нет больше кода JS где-то выполнение JS выполняется до AJAX success и complete обратные вызовы выполняются

вот несколько примеров jsFiddle, чтобы продемонстрировать проблему:

Пример 1: это ситуация, которую вы испытываете. The blockUI текст не отображается до тех пор, пока ajax вызов выполняется.

Пример 2: это точно такая же ситуация, как и ваша, но с alert до ajax звонок. Потому что там это alert тайм-аут внутри blockUI места появления blockUI текст после alert вместо ajax .

Пример 3: это как это должно работать без async:false

это скорее всего из-за async : false . Так как ваш звонок синхронный, после вашего звонка в $.ajax() функция начинается, ничего не происходит, пока не будет получен ответ, и следующая вещь, насколько ваш код идет, будет success проводник

чтобы заставить его работать, вы можете сделать что-то подобное

Источник

jQuery для начинающих. Часть 3. AJAX

Представляю Вам третью статью из серии jQuery для начинающих. В этот раз я постараюсь рассказать о реализации AJAX запросов.

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

Примечание: Во всех примерах используется сокращенный вариант вызова jQuery методов, используя функцию $ (знак доллара)

jQuery(..).load

Начнем с самого простого — загрузка HTML кода в необходимый нам DOM элемент на странице. Для этой цели нам подойдет метод load. Данный метод может принимать следующие параметры:

1. url запрашиваемой страницы
2. передаваемые данные (необязательный параметр)
3. функция которой будет скормлен результат (необязательный параметр)

Приведу пример JavaScript кода:

// по окончанию загрузки страницы
$ ( document ) . ready ( function ( ) <
// вешаем на клик по элементу с id = example-1
$ ( ‘#example-1’ ) . click ( function ( ) <
// загрузку HTML кода из файла example.html
$ ( this ) . load ( ‘ajax/example.html’ ) ;
> )
> ) ;

jQuery.ajax

$. ajax ( <
url : ‘/ajax/example.html’ , // указываем URL и
dataType : «json» , // тип загружаемых данных
success : function ( data , textStatus ) < // вешаем свой обработчик на функцию success
$. each ( data , function ( i , val ) < // обрабатываем полученные данные
/* . */
> ) ;
>
> ) ;

jQuery.get

Загружает страницу, используя для передачи данных GET запрос. Может принимать следующие параметры:

1. url запрашиваемой страницы
2. передаваемые данные (необязательный параметр)
3. callback функция, которой будет скормлен результат (необязательный параметр)
4. тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

jQuery.post

Данный метод аналогичен предыдущему, лишь передаваемые данные уйдут на сервер посредством POST’а. Может принимать следующие параметры:

1. url запрашиваемой страницы
2. передаваемые данные (необязательный параметр)
3. callback функция, которой будет скормлен результат (необязательный параметр)
4. тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

$ ( document ) . ready ( function ( ) < // по завершению загрузки страницы
$ ( ‘#example-3’ ) . click ( function ( ) < // вешаем на клик по элементу с id = example-3
$. post ( ‘ajax/example.xml’ , < >, function ( xml ) < // загрузку XML из файла example.xml
$ ( ‘#example-3’ ) . html ( » ) ;
$ ( xml ) . find ( ‘note’ ) . each ( function ( ) < // заполняем DOM элемент данными из XML
$ ( ‘#example-3’ ) . append ( ‘To: ‘ + $ ( this ) . find ( ‘to’ ) . text ( ) + ‘
‘ )
. append ( ‘From: ‘ + $ ( this ) . find ( ‘from’ ) . text ( ) + ‘
‘ )
. append ( ‘‘ + $ ( this ) . find ( ‘heading’ ) . text ( ) + ‘
‘ )
. append ( $ ( this ) . find ( ‘body’ ) . text ( ) + ‘
‘ ) ;
> ) ;
> , ‘xml’ ) ; // указываем явно тип данных
> )
> ) ;

version = «1.0» encoding = «UTF-8» ?>
>
> Tove >
> Jani >
> Reminder >
> Don’t forget me this weekend! >
>

jQuery.getJSON

Загружает данные в формате JSON (удобней и быстрее нежели XML). Может принимать следующие параметры:

1. url запрашиваемой страницы
2. передаваемые данные (необязательный параметр)
3. callback функция, которой будет скормлен результат (необязательный параметр)

$ ( document ) . ready ( function ( ) < // по завершению загрузки страницы
$ ( ‘#example-4’ ) . click ( function ( ) < // вешаем на клик по элементу с id = example-4
$. getJSON ( ‘ajax/example.json’ , < >, function ( json ) < // загрузку JSON данных из файла example.json
$ ( ‘#example-4’ ) . html ( » ) ;
// заполняем DOM элемент данными из JSON объекта
$ ( ‘#example-4’ ) . append ( ‘To: ‘ + json. note . to + ‘
‘ )
. append ( ‘From: ‘ + json. note . from + ‘
‘ )
. append ( ‘‘ + json. note . heading + ‘
‘ )
. append ( json. note . body + ‘
‘ ) ;
> ) ;
> )
> ) ;

<
note : <
to : ‘Tove’ ,
from : ‘Jani’ ,
heading : ‘Reminder’ ,
body : ‘Don \’ t forget me this weekend!’
>
>

jQuery.getScript

данная функция загружает и выполняет локальный JavaScript. Может принимать следующие параметры:

1. url запрашиваемого скрипта
2. callback функция, которой будет скормлен результат (необязательный параметр)

function testAjax ( ) <
$ ( ‘#example-5’ ) . html ( ‘Test completed’ ) ; // изменяем элемент с id = example-5
>

Отправка Формы

Для отправки формы посредством jQuery можно использовать любой из перечисленных способов, а вот для удобства «сбора» данных из формы лучше использовать плагин jQuery Form

Отправка Файлов

Для отправки файлов посредством jQuery можно использовать плагин Ajax File Upload иль One Click Upload

Взаимодействие с PHP

Для организации работы с PHP использую бибилотеку jQuery-PHP, удобно если Вам нравится jQuery ;), подробней читаем в статье PHP библиотека для jQuery

Примеры использования JSONP

Отдельно стоит отметить использование JSONP — ибо это один из способов осуществления кросс-доменной загрузки данных. Если немного утрировать — то это подключение удаленного JavaScript’a, содержащего необходимую нам информациию в формате JSON, а так же вызов нашей локальной функции, имя которой мы указываем при обращении к удаленному серверу (обычно это параметр callback). Чуть более наглядно это можно продемонстрировать следующая диаграмма (кликабельно):

При работе с jQuery имя callback функции генерируется автоматически для каждого обращения к удаленному серверу, для этого достаточно использовать GET запрос ввида:

Вместо последнего знака вопроса (?) будет подставлено имя callback функции. Если же Вы не хотите использовать данный способ, то Вам необходимо будет явно указать имя callback функции, используя опцию jsonp при вызове метода jQuery.ajax().

Google Поиск

Пример получения и обработки результатов поиска используя Google, более подробную информацию найдете в статье «jQuery + AJAX + (Google Search API || Yahoo Search API)»

Yahoo Поиск

Пример получения и обработки результатов поиска используя Yahoo, более подробную информацию найдете в статье «jQuery + AJAX + (Google Search API || Yahoo Search API)»

JSONP API

Приведу так же небольшой список открытых API с поддержкой JSONP:

• Google — поиск и большинство сервисов
• Yahoo — поиск и большинство сервисов
• Flickr
• MediaWiki — соответственно и все производные — Wikipedia, Wiktionary и т.д.
• Digg
• CNET
• aideRSS

События

Для удобства разработки, на AJAX запросах висит несколько event’ов, их можно задавать для каждого AJAX запроса в отдельности, либо глобально. На все event’ы можно повесить свою функцию.

Пример для отображения элемента с во время выполнения любого AJAX запроса:

$ ( «#loading» ) . bind ( «ajaxSend» , function ( ) <
$ ( this ) . show ( ) ; // показываем элемент
> ) . bind ( «ajaxComplete» , function ( ) <
$ ( this ) . hide ( ) ; // скрываем элемент
> ) ;

$. ajax ( <
beforeSend : function ( ) <
// Handle the beforeSend event
> ,
complete : function ( ) <
// Handle the complete event
>
// .
> ) ;

Для большей наглядности, приведу следующую диаграмму (кликабельно):

Ну и собственно список всех event’ов:

• ajaxStart — Данный метод вызывается в случае когда побежал AJAX запрос, и при этом других запросов нету
• beforeSend — Срабатывает до отправки запроса, позволяет редактировать XMLHttpRequest. Локальное событие
• ajaxSend — Срабатывает до отправки запроса, аналогично beforeSend
• success — Срабатывает по возвращению ответа, когда нет ошибок ни сервера, ни вернувшихся данных. Локальное событие
• ajaxSuccess — Срабатывает по возвращению ответа, аналогично success
• error — Срабатывает в случае ошибки. Локальное событие
• ajaxError — Срабатывает в случае ошибки
• complete — Срабатывает по завершению текущего AJAX запроса (с ошибкои или без — срабатывает всегда).Локальное событие
• ajaxComplete — Глобальное событие, аналогичное complete
• ajaxStop — Данный метод вызывается в случае когда больше нету активных запросов

Так же Вы можете скачать все примеры в одном архиве.

Источник