Опубликовать форму в JQuery и заполнить DIV - не работает в IE

Question

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

<div id="add_value_form">

<form method="POST" action="#" onsubmit='return false'>
  <!-- input fields -->
  <input type="submit" value="Add" onclick='post_form("/add_value");'>
</form>

</div>

Функция JS:

function post_form(url) {
  $.post(url, {'test':'test'}, function(data) {
    $("#add_value_form").empty().append(data); 
  }, "text");
}

Это отлично работает в FF3, однако в IE6 / 7 оно работает только случайным образом.

Сервер подтверждает, что почтовые запросы поступают из IE, но он получает данные почты только изредка.

Любопытно, я решил предупредить переменную данных:

$.post(url, {'test':'test'}, function(data) {alert(data);}, "text");

Конечно, FF3 будет каждый раз печатать возвращаемый HTML, в то время как IE6 / 7, в основном, печатает пробелы со случайным возвратом HTML. Я не смог ничего найти по этой проблеме, так что я делаю не так?

Решено: Я отследил это до перенаправления HTTP, которое было в моем коде обработки запросов. Таким образом, функция, обрабатывающая запрос POST, создаст редирект, и IE это не понравится. В то время у меня был полный психический запор, и мне не нужно было перенаправление.

Странная часть, конечно, заключается в том, что это работает в FF, и в некоторых случаях IE будет работать, с перенаправлением на месте.

Answer 1

Я бы сказал, что в этом сценарии вам вообще не нужно использовать тег формы.

<div id="add_value_form">
  <!-- input fields -->
  <input type="button" value="Add" onclick='post_form("/add_value");' />
</div>

Редактировать Как сказал Паоло Бергантино, я бы также избегал использования встроенного JavaScript. Поэтому вместо этого используйте:

<div id="add_value_form">
  <!-- input fields -->
  <input type="button" value="Add" class="formSubmitButton" />
</div>

1010 * Javascript *

$(document).ready(function() {
  $('.formSubmitButton').click(function() {
      $.post('/add_value', {'test':'test'}, function(data) {
          $("#add_value_form").empty().append($(data));
      }, "text");
  });
});

Обновление Поскольку это все еще вызывает проблемы, я бы выполнил некоторое тестирование методом $.ajax. Кроме того, я не верю, что POST-вызовы когда-либо кэшируются, но на всякий случай попробуйте установить для кэшированного значение false. Другой тест, чтобы убедиться, что у вас нет проблем с сериализацией, состоит в передаче ваших данных в уже закодированном виде. И если у вас все еще есть проблемы, вы можете попытаться установить свой dataType в текст

$.ajax({
  url: '/add_value',
  type: 'POST',
  cache: false,
  data: 'test=testValue',
  dataType: 'text',
  complete: function(xhr, textStatus) {
    alert('completed');
  },
  success: function(data) {
    alert(data);
  },
  error: function(xhr, textStatus, errorThrown) {
    alert('woops');
  }
});