如何将数据从 Ajax 弹出窗口传递到父页面？答案

【问题标题】：How to pass data from Ajax popup to parent page?如何将数据从 Ajax 弹出窗口传递到父页面？
【发布时间】：2010-11-16 20:58:15
【问题描述】：

我目前在我的应用程序的主页上显示了一个 Ajax 弹出窗口。在此弹出窗口中，我有选择列表，当用户关闭弹出窗口时，我想将弹出窗口中的选定值传递回主页。

我觉得有一个基本的方法可以做到这一点，但我似乎无法弄清楚。

【问题讨论】：

“ajax 弹出窗口”是什么意思？如果它是一个浏览器窗口弹出，它不是 ajax。如果是通过 ajax 请求填充的 javascript 弹出窗口，则取决于您使用的库/代码

标签： javascript html ajax popup window

【解决方案1】：

使用window.opener

http://www.webreference.com/js/tutorial1/opener.html

【讨论】：

【解决方案2】：

当你通过 javascript 打开一个弹出窗口时（无论内容是通过 ajax 还是其他技术），你都可以轻松控制它。

对于您的问题，您需要 window.opener 指向原始文档：干净的：

在弹出的代码中有：

<body onclose="window.opener.somevar=document.getElementById('myid').value;window.opener.orsomefunction('value');">
<input id="myid"/>
</body>

这样，当您关闭它时，它会设置一个变量和/或调用一个函数。

您也可以在按钮上或直接在输入上设置 set-function

<button onclick="window.opener....;window.close();"/>

【讨论】：

【解决方案3】：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<?PHP 
$test_1 = $_GET['variable1'];
$test_2 = $_GET['variable2'];
$test_3 = $_GET['variable3'];

$test1 = "blabla1";
$test2 = "blabla2";
$test3 = "blabla3";
?>
<html>
<head>
    <title>Untitled</title>
     <script type="text/javascript" src="js/mootools-1.2.4-core-yc.js"></script>
     <script type="text/javascript">
     //on dom ready...
window.addEvent('domready', function() {

    /* ajax replace element text */
    $('ajax-replace').addEvent('click', function(event) {
        //prevent the page from changing
        event.stop();
        //make the ajax call, replace text
        var req = new Request.HTML({
            method: 'get',
            url: $('ajax-replace').get('href'),
            data: { 'variable1' : '<?=$test1?>', 'variable2':'<?=$test2?>', 'variable3' : '<?=$test3?>' },
            //onRequest: function() { alert('Request made. Please wait...'); },
            update: $('message-here'),
            onComplete: function(response) { alert('Variable 1: <? echo $test1; ?> Variable 2: <? echo $test2; ?> Variabble 3: <? echo $test3; ?>'); $('message-here');
            }
        }).send();
    });
});

     </script>
</head>

<body>


<p>
  <a href="index.php" id="ajax-replace">Click</a> 
</p>
<div id="message-here">
<?PHP
echo $variable_1."<br>";
echo $variable_2."<br>";
echo $variable_3."<br>";
?>
</div>

</body>
</html>

【讨论】：

StackOverflow 不支持仅代码的答案。