javascript - 我想在按下“提交”按钮后在 iframe 中的 index.html 上加载 get.php 文件

Question

好吧，我在这里面临这个问题 我有 2 个文件:

1. index.html
2. get.php

关于index.html我有一个表格:

<form method="POST" action="get.php">
    <input name="x" placeholder="first value" type="text">
    <input name="y" placeholder="second value" type="text">
    <input value="send" type="submit">
</form>
<br>
<iframe id="frame" class="right" width="100%" height="300" src="get.php"></iframe>

这是get.php文件

<?php

if(isset($_POST['x'])==false)
{
    echo "<h3>First variable is required...</h3>";
    exit;
}

if(isset($_POST['y'])==false)
{
    echo "<h3>Second variable is required...</h3>";
    exit;
}

echo "<a style='padding:15px;background:#eee;color:#fff;border-radius:5px;' href='index.html'>Go back to the main page</a><br><br><br>";
$x=0;
$y=0;
$x=$_POST["x"];
$y=$_POST["y"];

echo "Values entered were $x and $y respectively<br><br><br>";
echo "Sum of $x+$y= ".($x+$y)."<br><br>";
echo "Multiplication of $x*$y= ".($x*$y)."<br><br>";
echo "Division of $x/$y= ".($x/$y)."<br><br>";
echo "Power of of $x<sup>$y</sup>= ".pow($x,$y)."<br><br>";
echo "power of $y<sup>$x</sup>= ".pow($y,$x)."<br><br>";

echo "Table of $x<br><br>";

for($i=1;$i<=10;$i++){
    echo "$x * $i = ".($x*$i)."<br>";
}

echo "<br><br>Table of $y<br><br>";
for($i=1;$i<=10;$i++){
    echo "$y * $i = ".($y*$i)."<br>";
}

?>

现在需要的是我在两个字段中输入 2 个值，一旦我单击提交按钮，它应该显示 get.php 的结果在 <iframe>放在 index.html而不是加载 get.php 的新页面

Answer 1

您可以使用以下代码片段设置 iframe 内容。数据是使用 ajax 发送的，您需要防止 form 提交行为。尝试例如:

$(function() { // document ready handler
  $('form[action="get.php"]').on('submit', function(e) {
    e.preventDefault();
    $.post(this.action, $(this).serialize(), function(data) {
      var iframeDoc = $('#frame')[0].contentDocument;
      iframeDoc.open();
      iframeDoc.write(data);
      iframeDoc.close();
    })
  })
});