iframe中的Ajax无法更新iframe
[英]Ajax in iframe not updating the iframe
问题描述
I've searched high and low for an answer to this question but have yet to find a similar question or an answer. 
我一直在寻找这个问题的答案，但还没有找到类似的问题或答案。 I apologize if this is a "re-ask". 如果这是“重新询问”，我深表歉意。
Essentially my problem is this: I have an iframe inside of my parent page, and inside the iframe is a php page that includes my .js file containing my AJAX. 本质上，我的问题是这样的：我在父页面内有一个iframe，而在iframe内是一个php页面，其中包含包含AJAX的.js文件。 I want button clicks in the iframe to create an AJAX request and update the iframe. 我希望在iframe中单击按钮以创建AJAX请求并更新iframe。 As far as I know I have it all set up correctly but when I attempt to echo my $_POST (I've tried GET too) variables to test them they never change. 据我所知，它们都已正确设置，但是当我尝试回显$ _POST（我也尝试过GET）变量来测试它们时，它们从未改变。 Here's my code: 这是我的代码：
Parent: 上级：
<!DOCTYPE html>
<html style = "height: 100%; width: 100%;">
<head>
<title>Employee Web Service</title>
<link rel="stylesheet" type="text/css" media="screen, projection" href="lib/css/main.css" />
<script src="lib/scripts/jquery-2.0.3.min.js" type="text/javascript"></script>
</head>
<body style = "height: 100%;">
<div id = "header">
<img src = "images/header.png" id = "headerLogo">
</div>
<div id = "nav">
<ul>
<li><a href = "home.php" target = "content">Home</a></li>
<li><a href = "#">Modules</a>
<ul>
<li><a href = "test.php?id=1" target = "content">Module 1</a></li>
<li><a href = "test.php?id=2" target = "content">Module 2</a></li>
<li><a href = "test.php?id=3" target = "content">Module 3</a></li>
<li><a href = "test.php?id=4" target = "content">Module 4</a></li>
</ul>
</li>
<li><a href = "scores.php" target = "content">Scores</a></li>
<li><a href = "calendar.php" target = "content">Calendar</a></li>
<li><a href = "logout.php">Logout</a></li>
</ul>
</div>
<div id = "content">
<iframe src = "home.php" name = "content" id = "frameContent"></iframe>
<script>
$(document).ready(function(){
$('#frameContent').load(function(){
$('#frameContent').contents().find('head').append('<link href="lib/css/iframe.css" rel="stylesheet" type="text/css" />');
});
});
</script>
</div>
</body>
</html>
test.php inside Iframe: iframe中的test.php：
<?php
if(isset($_POST['begin'])){
$test = true;
echo($_POST['begin']);
} else if (isset($_POST['backToSlides'])){
echo($_POST['backToSlides']);
}
?>
<head>
<script src="lib/scripts/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src = "lib/scripts/testScript.js" type="text/javascript"></script>
</head>
<body>
<div id = "startTest" <?php if(isset($test)){echo 'style = "visibility: hidden; disabled: true;"';}?> >
<h1>Test <?php echo $id; ?></h1>
<form id = "begin">
<input type = "submit" name = "backToSlides" value = "Go back" style = "background: #B9090B;">
<input type = "submit" name = "begin" value = "Start Test" style = "background: #09913A;">
</form>
</div>
<div id = "testContent"></div>
</body>
testScript.js: testScript.js：
$(document).ready(function(){
$('input[name = "backToSlides"], input[name = "begin"]').click(function(event){
event.preventDefault();
post = $(this).attr("name") + "=" + $(this).val();
$.ajax({
url: "/test.php",
type: "POST",
data: post, //Data purposely not serialized due to the way submit-type input field values are handled
success: function(){
console.log("Processing request...");},
error: function(){
console.log("Error submitting request");}
});
});
});
This ALWAYS calls the success function, but I never see the value of the submit buttons in the post data. 这总是调用成功函数，但是我从未在发布数据中看到提交按钮的值。 I know they're being passed into the ajax call properly because I've tried calling alert($(this).attr("name") + "=" + $(this).val()) and I get the expected result of "key=value". 我知道它们已正确传递到ajax调用中，因为我尝试调用alert（$（this）.attr（“ name”）+“ =” + $（this）.val（））并得到预期的结果“键=值”的结果。
A speedy response is greatly appreciated! 非常感谢您的迅速反应！
2 个解决方案
解决方案1
1 2014-07-08 00:55:45
You need to prevent the default browser submittal of the form, otherwise since you are submitting to same url it will just refresh the iframe page 您需要阻止该表单的默认浏览器提交，否则，由于您要提交到相同的网址，因此它只会刷新iframe页面
$('input[name = "backToSlides"], input[name = "begin"]').click(function(event){
event.preventDefault();
/* ajax */
})
解决方案2
0 已采纳 2014-07-09 07:00:00
Changed the iframe to a div and used the jquery .load() function instead 将iframe更改为div并使用jquery .load（）函数代替
on the parent page: 在父页面上：
<script>
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
tar = $(this).attr("href");
$("#content").load(tar);
);
);
</script>
I could just turn all the <a> tags into <div> tags that change the cursor to a pointer on mouse-over instead so I don't have to prevent the default action and scan the 'href' attribute, but this does the trick for now. 我可以将所有<a>标记转换为<div>标记，从而将鼠标悬停时将光标更改为指针，因此我不必阻止默认操作并扫描'href'属性，但这可以现在把戏。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.