在JQuery中发布表单并填充DIV-在IE中损坏

小编典典

在JQuery中发布表单并填充DIV-在IE中损坏

ajax

我正在尝试创建一个通过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有时也可以工作，并且具有适当的重定向。

阅读 223

2020-07-26

共1个答案

小编典典

我想说，在这种情况下，您根本不需要使用form标记。

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

编辑正如保罗所说Bergantino我还要避免使用内嵌的JavaScript。因此，请改用：

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

Java脚本

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

2020-07-26