iframe 中的 Ajax 不更新 iframe答案

【问题标题】：Ajax in iframe not updating the iframeiframe 中的 Ajax 不更新 iframe
【发布时间】：2014-07-08 00:35:32
【问题描述】：

我已经搜索过这个问题的答案，但还没有找到类似的问题或答案。如果这是“重新询问”，我深表歉意。

基本上我的问题是：我的父页面中有一个 iframe，而 iframe 内部是一个 php 页面，其中包含我的 .js 文件，其中包含我的 AJAX。我希望在 iframe 中单击按钮来创建 AJAX 请求并更新 iframe。据我所知，我已经正确设置了所有内容，但是当我尝试回显我的 $_POST （我也尝试过 GET ）变量来测试它们时，它们永远不会改变。这是我的代码：

家长：

<!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>

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：

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

这总是调用成功函数，但我从未在发布数据中看到提交按钮的值。我知道它们被正确地传递到 ajax 调用中，因为我尝试调用 alert($(this).attr("name") + "=" + $(this).val()) 并且我得到了预期“键=值”的结果。

非常感谢您的快速响应！

【问题讨论】：

这里真的需要 iframe吗？
直接打开test.php会出现这种情况吗？我还将post 设置为post = {}; post[this.name] = this.value
iframe 正在加载 home.php，而不是 test.php。
@Barmar 我认为 OP 的意思是单击其中一个 Module 链接
@Phil 我在直接链接到 test.php 时遇到了同样的问题。尚未尝试更改 post 变量，我会试一试。

标签： javascript php jquery ajax iframe

【解决方案1】：

您需要阻止表单的默认浏览器提交，否则由于您提交到相同的 url，它只会刷新 iframe 页面

$('input[name = "backToSlides"], input[name = "begin"]').click(function(event){

    event.preventDefault();

    /* ajax */

})

【讨论】：

看来我忘了在我的原始帖子中添加这一点。 event.preventDefault();在那里，它仍然无法正常工作。
使用浏览器控制台网络选项卡查看是否有 ajax 请求。如果是，请查看发送的内容、状态等。控制台中记录了什么？
嗯，好吧，所以我注意到了一些奇怪的事情。（使用 Chrome）在 PREVIEW 和 RESPONSE 选项卡中显示回声和参数正在正确设置和接收，但在实际页面上没有显示回声。
因为在head中回显文本是无效的html。需要重新考虑您要返回的内容
我用 var_dump() 替换了回声，但仍然没有。另外，如果您注意到，如果设置了 $test，我将检查 startTest DIV，如果设置了则隐藏 div。在预览中，div 被正确隐藏，在主页上却没有。

【解决方案2】：

将 iframe 更改为 div 并改用 jquery .load() 函数

在父页面上：

<script>
    $(document).ready(function(){
        $("a").click(function(event){
            event.preventDefault();
            tar = $(this).attr("href");
            $("#content").load(tar);
        );
    );
</script>

我可以将所有 <a> 标签转换为 <div> 标签，将光标更改为鼠标悬停时的指针，这样我就不必阻止默认操作并扫描“href”属性，但是现在就可以了。

【讨论】：