Question

有一个选择框。我通过ajax为onchange方法编写了一个函数。当我在div中显示表单成功时，它的效果很好。我的问题是如何在iframe中显示我的表单成功？这是我的片段：

$(document).ready(function(e) {
  $("[name='count']").on('change', function() {
    var url = "/page2.html";
    $.ajax({
      type: "POST",
      url: url,
      data: $("#form").serialize(),
      success: function(data) {
        $("#box").html(data)
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<form method="post" action="" id="form">
 <select name="count">
  <option value="1">1</option>
  <option value="2">2</option>
</select> 
</form>

<iframe name="box" id="box"></iframe>
</body>
</html>

由于

Answer 1

iframe拥有自己的窗口，因此您无法像使用其他元素一样直接访问它

您可以使用contents()访问该窗口并执行以下操作：

$("#box").contents().find('body').html(data);

在我看来，您不需要ajax，只需提交带有target作为iframe的表单

的 DEMO

Answer 2

该代码仅包含对您的问题的回答'在iframe中显示表单的成功'。如果您要发布表单，只需使用标准html方法直接发布到page2.html，您就不必使用ajax帖子。如果您有特定要求，请遵循以下代码。确保使用name标记为每个输入元素命名，否则serialize函数将不返回任何数据。

page2.html应该在服务器端运行，并接收和处理数据并显示/回显相应的响应消息。

HTML，

<form method="post" action="" id="form">
 <select id="count" name="count">
  <option value="1">1</option>
  <option value="2">2</option>
</select>
</form>
<iframe id="thepage"></iframe>

JQuery的，

    $(document).ready(function(e) {
      $("#count").on('change', function() {  

var url = "/page2.html";
    $.ajax({
      type: "POST",
      url: url,
      data: $("#form").serialize(),
      success: function(data) {
//set iframe content
var iFrame = $("#thepage");
        var iFrameDoc = iFrame[0].contentDocument || iFrame[0].contentWindow.document;
        iFrameDoc.write(data);//set value
        iFrameDoc.close();

      }
    });

      });
    });

Answer 3

您可以像这样访问iframe的内容：假设您处于“success（）”函数中并且iframe src不是跨源的

<controls:BindableGrid ItemsSource="{Binding Data}" BindableColumns="{Binding Data}" AutoGenerateColumns="True">
 </controls:BindableGrid>

如何在iframe中显示表单的成功

3 个答案: