我想加载一个get.php文件在iframe上的index.html一旦提交按钮被按下
I want to load a get.php file in iframe on index.html once the Submit button is pressed
我现在面临这个问题我有两个文件:
-
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();
})
})
});
相关文章:
- 分析高度属性时出现意外值{{specs.height}}.index.html
- AngularJS-需要在index.html页面中访问来自服务的数据
- index.html使用webpack开发服务器未重新加载
- 从index.html调用函数,该函数无限循环
- RouteChangeStart事件在初始index.html页面加载时触发
- Angular2:Index.html没有't显示该文件;正在加载&”;
- 如何使用gulp-inject将文件的内容插入到我的index.html中
- 使url匹配'/''/索引'和'/index.html'到单一状态
- 将所有angular2捆绑包包含在index.html中会使导入从内存获取数据,而不是再次从服务器请求数据
- 咕哝式发球;t将index.html与'/'要求
- AngularJS应用程序:如何将.js文件包含到index.html中
- 无法从index.html调用javascript函数
- 捕获刷新并将页面更改为index.html
- 添加java脚本后,Dropdown Menu无法在Index.html上工作
- jquery手机应用程序的第一页必须是index.html
- Angular 2-我如何使我的index.html文件的标题和关键字和描述的元标签是动态的
- 使index.html的默认状态不带#something
- 从'更改不同语言的图像;index.html'到'关于.html'
- ng递归地包括整个index.html;达到“10$digest()迭代”;
- Visual Studio Bundle for SPA html index page