jQuery .load, кажется, работает в неожиданной точке

Question

Итак, я пытаюсь загрузить возвращенный html со страницы .aspx, но событие click должно сработать, прежде чем оно выполнит некоторые действия, от которых зависит запрос AJAX. Более конкретно, я делаю это. Когда пользователь вводит текстовое поле, эта функция запускается ...

function KeyPress() {
  $("#" + HiddenButtonId).click();
  $("#test").load("TempJumpToAJAX.aspx");
}

then $ ("#" + HiddenButtonId) .click (); действительно устанавливает некоторые данные сеанса в коде позади файла. В частности ...

Session["SearchText"] = Search.Text;

затем, $ ("# test"). Load ("TempJumpToAJAX.aspx"); вызывает эту ASPX-страницу, которая возвращает только что созданное поле выбора ...

        Response.Expires = -1;

        StringBuilder builder = new StringBuilder();


        builder.Append("<select id=\"testListId\" name=\"testList\" size=\"4\" style=\"width:200px;\">");
        builder.Append("<option>");
        builder.Append(Session["SearchText"]);
        builder.Append("</option>");            
        builder.Append("</select>");

        Response.ContentType = "text/HTML";
        Response.Write(builder.ToString());
        Response.End();

Проблема в том, что порядок, похоже, облажался: сначала он пытается добавить сеанс ["SearchText"], а затем запускает код, который запускает событие click. Так что это работает больше так ...

function KeyPress() {
  $("#test").load("TempJumpToAJAX.aspx");
  $("#" + HiddenButtonId).click();
}

Где команды меняются местами. Так что в действительности происходит то, что переменная сеанса имеет пустую строку, а не то, что пользователь набрал в текстовом поле. Что странно для меня, так это то, что не должно быть пустой строки, похоже, что ничего не должно быть, поскольку переменная сеанса на этом этапе не была инициализирована ни к чему. Я действительно понятия не имею, что происходит. Мел, до неопытности, я думаю. Есть идеи?

Answer 1

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

Следующий скрипт на стороне клиента должен сделать это.

function KeyPress() {
  $("#test").load("TempJumpToAJAX.aspx", {searchText: $("#").val()});
}

В этом коде вы получаете идентификатор текстового поля поиска, а затем используете jQuery для получения значения этого текстового поля. Это будет передано на страницу TempJumpToAJAX.aspx как переменная POST с именем searchText. Вы должны иметь доступ к этим данным, используя переменную Request ['searchText'] на странице 'TempJumpToAJAX.aspx'.

Answer 2

Отлично! Спасибо всем, все ваши ответы были довольно проницательными. Реальная проблема, которую я узнал, заключалась в том, что я не знал, как отправлять переменные с этим запросом ajax. Это здесь.

$("#test").load("TempJumpToAJAX.aspx", {searchText: $("#").val()});

Также mintywalker, спасибо за понимание. Все было хорошо.

Answer 3

Существует плагин JQuery, который инкапсулирует то, о чем говорит предыдущий ответ. Его называют TypeWatch . Он позволяет запускать функцию после того, как пользователь перестал вводить текстовое поле в течение указанного количества миллисекунд. Я использовал его раньше, и он работает довольно хорошо.

Answer 4

Другое умное расширение того, что вы делаете, - не выполнять вызов ajax, как только нажата клавиша. Если пользователь быстро наберет длинное слово, вы получите несколько запросов ajax http, запущенных быстрее, чем они могут вернуть и обновить ваш пользовательский интерфейс.

Это увеличивает нагрузку на ваш сервер и может замедлить работу пользовательского интерфейса.

Вместо этого onkeypress, сохраните все необходимые данные и затем позвоните

var timeout = setTimeout ('some_method ()', 100);

Который говорит вызов some_method () за 100 миллисекунд. Первое, что вы должны сделать в методе нажатия клавиш, это отменить / очистить вызов Timeout с помощью clearTimeout.

http://www.w3schools.com/js/js_timing.asp

some_method () также должен очистить любое время ожидания, а затем сделать запрос http ajax.

Чистый эффект здесь в том, что ваш ajax-запрос немного задерживается, но никогда не происходит, если пользователь нажимает другую клавишу. Или, другими словами, не пытайтесь запустить ajx-запрос, пока пользователь не остановит / приостановит ввод текста. 100 миллисекунд могут быть слишком высокими или слишком низкими, но, надеюсь, вы поняли идею!

Вам также следует позаботиться о ситуации с «медленным сервером». Учтите это:

• Пользователь вводит «hello», делает паузу на 1 секунду, вы запускаете ajax-запрос с «hello» в качестве параметра
• Пользователь продолжает вводить «мир», поэтому текстовое поле теперь содержит «привет мир» и прекращает ввод.
• Вы запускаете второй запрос ajax с параметром "hello world".
• Второй запрос (для "hello world") возвращается первым, вы обновляете свой пользовательский интерфейс
• Когда возвращается первый запрос («привет»), вы снова обновляете свой пользовательский интерфейс.

по электронной почте Ой! Пусть сервер включит исходную строку запроса в данные (json), которые он возвращает клиенту. Когда клиент получит обратно данные ajax, убедитесь, что результат / данные соответствуют запросу ("привет" / "привет мир"), который соответствует текущему текстовому полю.