小编典典

在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有时也可以工作,并且具有适当的重定向。


阅读 224

收藏
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