我想加载上的index.html在iframe中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个值在这两个领域，一旦我点击提交按钮，它应该表现出放在index.html而不是在的get.php的结果正在载入一个新页面get.php

Answer 1

您可以使用下面的代码片段设置iframe内容。数据使用ajax发送，您需要阻止form提交行为。尝试e.g：

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