iframe中的Ajax無法更新iframe

Question

我一直在尋找這個問題的答案，但還沒有找到類似的問題或答案。 如果這是“重新詢問”，我深表歉意。

本質上，我的問題是這樣的：我在父頁面內有一個iframe，而在iframe內是一個php頁面，其中包含包含AJAX的.js文件。 我希望在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（））並得到預期的結果“鍵=值”的結果。

非常感謝您的迅速反應！

Answer 1

您需要阻止該表單的默認瀏覽器提交，否則，由於您要提交到相同的網址，因此它只會刷新iframe頁面

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

    event.preventDefault();

    /* ajax */

})

Answer 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'屬性，但這可以現在把戲。

iframe中的Ajax無法更新iframe

問題描述

2 個解決方案

解決方案1
1 2014-07-08 00:55:45

解決方案2
0 已采納 2014-07-09 07:00:00

iframe中的Ajax無法更新iframe

問題描述

2 個解決方案

解決方案1 1 2014-07-08 00:55:45

解決方案2 0 已采納 2014-07-09 07:00:00

解決方案1
1 2014-07-08 00:55:45

解決方案2
0 已采納 2014-07-09 07:00:00