我现在面临这个问题我有两个文件:
-
index.html -
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在index.html上放置的<iframe>的结果，而不是加载get.php的新页面
您可以使用下面的代码片段设置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();
})
})
});