Ajax jQuery вызывает полное обновление страницы в FireFox

Question

Я делаю вызов ajax с помощью jQuery. Вызов ajax прекрасно работает в IE 7, но FireFox 3 всегда выполняет полное обновление страницы при выполнении этого вызова. Вызов ajax - это POSTing для метода страницы ASP.NET.

Есть ли проблема в jQuery или я просто пропускаю некоторые настройки?

$.ajax({
  async: false,
  type: "POST",
  url: "Default.aspx/DoSomething",
  data: "{" + parms + "}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  cache: false,
  success: function(data) { succesfulPost(data); },
  error: function(XMLHttpRequest, textStatus, errorThrown) { 
    errorPost(textStatus, errorThrown);
  }
});

Звонок выполняется из события нажатия кнопки html. Я попробовал return false; в методе, который выполняет этот вызов ajax, но полное обновление в FireFox продолжается.

Я пытался установить async = true, но, похоже, это не работает. FireFox просто продолжает работать и не ждет, пока бэкэнд вернет ответ. FireFox (в js) фактически генерирует ошибку в вызове ajax. Как вы можете видеть выше, функция ошибки определена, и она срабатывает, когда я устанавливаю async = true.

Answer 1

Как вы вызываете метод AJAX? Это может быть так же просто, как отмена события, которое инициирует запрос AJAX, если оно также вызывает отправку в форме.

<input type="submit" onclick="doAjaxSubmit();return false;" value="Update" />

Добавление «return false;» приведет к отмене типичного действия отправки. Если это происходит из текстового поля, то вы захотите добавить e.preventDefault в обработчик для нажатия клавиши (или любого другого), который настроен для выполнения AJAX.

Answer 2

return false - это то, что вам нужно, однако, если ошибка javascript произойдет до того, как вы нажмете эту строку, браузер продолжит успешно выполнять событие нажатия ссылки или нажатия кнопки.

Вы можете попробовать попробовать окружить потенциальные проблемные области блоками try / catch.

В качестве альтернативы вы можете попробовать это:

e.preventDefault как первое утверждение в вашем обработчике. Это должно остановить событие по умолчанию, и я думаю, что вы можете вызвать это сразу ... Я просто не пробовал.

Редактировать: Я также хотел бы добавить, что ошибка ajax: обработчик только перехватывает ошибки, которые приходят с сервера ... как 403 или 500. Вы все равно должны обернуть вызов ajax в try / catch.

Answer 3

Кроме того, если вы вводите type = "submit" ... вы можете изменить его на type = "button". Тогда он не пытается отправить форму ... только делает ваше событие "click".

Answer 4

У меня была похожая проблема с Firefox при использовании Ajax. У меня было несколько элементов ввода в теге формы. Тем не менее, тег формы вызывал обновление страницы, даже когда я заменил свой тег на тег кнопки. Я заменил тег формы на div, и проблема исчезла.

Я также попробовал e.preventDefault (), как упоминалось выше. Это также решило проблему, позволив мне продолжать использовать тег формы.

Answer 5

Этот звонок внутри события щелчка? Если это так, убедитесь, что в конце события click указано «return false». Просто мысль. Я знаю, что это довольно старая шляпа, но я все равно упомянул об этом.

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