在 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>

编辑 正如 Paolo Bergantino 所说，我也会避免使用内联 javascript。所以改为使用：

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

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 设置为 text

$.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');
  }
});