jQuery - 如何在另一个页面中填充 div

Posted

技术标签:

【中文标题】jQuery - 如何在另一个页面中填充 div【英文标题】：jQuery - How to populate a div in another page 【发布时间】：2012-08-05 15:45:48 【问题描述】：

我已经纠结了一段时间了，所以我会尽可能简单：在页面 A 上的表单提交中，我想将页面 B 的内容加载到页面 C 的 div 中。 示例：

登录.html

<form id="test" action="#" method="post">
  <input type="text" name="user"/>
  <input type="submit" name="login" value="login"/>
</form>

用户.php

<?php
  echo "Hello, ".$_POST['user'];
?>

index.html

<body>
 <div id="target"></div>
</body>

最终结果（index.html）

“你好，JohnDoe”

我应该使用带有 URL 作为第一个选择器的 load() 方法吗？

$('#test').submit(function() 
 $('index.html#target').load('user.php');
);

P。 S.：所有页面都在同一个域中。

P。 P.S.：我说的是在不同的页面内，而不是从不同的页面。

【问题讨论】：

有什么理由不想使用 SESSIONS？ 我希望你有一堵软垫墙，这样你的头就不会受到撞击 :) 其实我确实使用会话，但我还需要在 index.html 中填充“目标”div。 【参考方案1】：

将$('index.html#target').load('user.php') 更改为$('#target').load('user.php');

如果您想从 user.php 获取 id 为 target 的 div，请使用以下代码：

$('#target').load('user.php #targer');

但您可能想发送 post 请求？

$.post('user.php', $('form').serialize(), function(data)
    $("#target").html(data)
);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

要学习的东西：

http://api.jquery.com/serialize/ http://api.jquery.com/jQuery.post/ http://docs.jquery.com/How_jQuery_Works

【讨论】：

是的！我正在寻找类似的东西！但是在第一个示例中，脚本如何理解#target 在“user.php”中而不是在“login.index”中？ （只是好奇） 当你在 jQuery load 方法中在文件名之后附加 div id 时，jQuey 加载具有指定文件名的文件并找到具有指定 id 的 div 但是#target 在“index.html”中，而不是在“user.php”中。 “user.php”只包含要被服务器执行并注入到静态“index.html”页面的DOM中的代码。 查看更新后的第二个示例。这可能就是你需要的。它将数据从您的表单发送到user.php，并将输出加载到ID为target的层 我需要在静态 HTML 页面内的“目标”div 中加载主 PHP 页面。我可以在 HTML 页面内部使用 load() 方法轻松完成此操作，但这次我需要从 external 登录页面执行此操作。我在您的代码中看不到对“index.html”的引用，我是否遗漏了什么？【参考方案2】：

这似乎需要改变

$('index.html#target').load('user.php');

到

$('#target').load('user.php');

编辑：好的，我将添加一些希望有用的代码和一些非常基本的标记。这不是特定于您的代码的，但这个概念应该很有用，并且只需几个 html 页面即可测试，没什么特别的。

我将说明的是如何从一个页面，另一个页面调用脚本。我将拥有一个称为主页面的页面/窗口，以及另一个称为子页面的页面/窗口。这些都不是很花哨的标记。

他们将使用一些非常基本的脚本调用进行交互，甚至相互之间来回传递信息。我将首先介绍每个的标记，然后是每个中的脚本。每个页面的标题中都有 jQuery 链接。

我的主要观点是，只要您获得对每个页面的引用，您就可以使用它的修改版本来告诉一个页面使用从另一个页面实例化的脚本/动作来执行某些操作。在我的示例中，我使用 window open 和 window.opener 作为此参考。

主页标记：页面是“TestCallbackmain.html”

<body>
    <div class='pagetop'>
        Test Callback Main
    </div>
    <div class='pageDetailContainer'>
        <div class='pageDetail'>
            Move on folks, nothing to see here
            <div id='detailContent'>
            </div>
            <button id='closeChildy'>
                Close Childy Window</button>
            <button id='openChildy'>
                Open Childy Window</button>
            <div id='childSees'>
                me empty</div>
        </div>
    </div>
</body>

子页面标记：这称为“TestCallBack.html”

<body>
    <div class='pagetop'>
        Test Callback Child
    </div>
    <div class='pageDetailContainer'>
        <div class='pageDetail'>
            <div id="achildy">
                HereIBe
                <div id="inchildy">
                    I am childy text
                </div>
            </div>
            <button id='pleaseKillMe'>
                Have Parent Close Me</button>
            <div id='textHolder'>
            </div>
            <div id='callbackTextHold'>
            </div>
        </div>
    </div>
    Howdy
</body>

主页脚本：

function logNewWindow(newWindow, JQnewWindowDoc) 
    var mychildText = JQnewWindowDoc.text(); //all the child doc text
    var innerChildText = $("#inchildy", JQnewWindowDoc).text(); // one element text
    var gotback = newWindow.childCallBack("CHILD TEXT:" + mychildText + " INNER:" + innerChildText);
    $('#callbackTextHold').text("GOT:" + gotback); //child sent me this text from childCallBack
;

var AWindow;
function openChild() 
    AWindow = window.open("TestCallBack.html");
;
$(document).ready(function() 
    $('#detailContent').text('Loaded JQ');
    $('#closeChildy').click(function() 
        AWindow.close();
    );
    $('#openChildy').click(function(e) 
        openChild();
        e.stopImmediatePropagation();
    );
);

子页面脚本：

var ct;
function childCallBack(passstuff) 
    $('#textHolder').html('ct:"' + ct + '"<br /> CHILD GOT:(' + passstuff + ")");
    return ct;
;

$(document).ready(function() 
    ct = $("#achildy").text();
    window.opener.logNewWindow(window, $(document));

    $('#childSees', window.opener.document).text('You been Had by child');

    $('#pleaseKillMe').click(function() 
        $('#closeChildy', window.opener.document).click();
    );
);

【讨论】：

那么第一个选择器与目标页面相关，而不是起始页面？ 'index.html#target' 根本不是 DOM 元素的有效选择器。【参考方案3】：

用户.php

<?php 
    session_start();
    if($_POST && $_POST['user']):
      if(!isset($_SESSION['user'])):
        $_SESSION['user'] = $_POST['user'];
        echo $_SESSION['user'];
      endif;
    elseif(isset($_SESSION['user'])):
      echo $_SESSION['user'];
    else:
      echo 'How did you get to this page?';
    endif;
?>

按预期加载文件。如果有表单数据发布到文件，您将返回它。如果没有表单数据，但表单之前已提交，会话将捕获该数据并输出用户名。如果他们从不提交表单，但还是请求了该页面，他们将收到“您是如何到达此页面的”？

【讨论】：

好的，原来的和这个很像，但是怎么把这个发送到index.html里面的“target”div，from login.html呢？ @marziobs 如果我们使用page A (index.html)，并且我们将表单数据发送到page B (user.php，并且我们希望将数据加载到page C (login.html)，那么您必须确保page C 由 page A 打开。否则javascript will have no access to it，还有更多；你必须使用window.open 来创建page C 或者......好吧，javascript will have no access to it【参考方案4】：

最好的可能是在服务器端进行。

在 index.html（应该是 index.php）中，您可以执行以下操作：

<body>
    <div id="target">
         <?php include 'user.php';
    ?></div>
</body>

在 login.html 中的表单应该这样设置：

<form id="test" action="index.php" method="post">

请注意，不需要 js 或 jQuery。

【讨论】：

我要补充一点，存在一些 php 框架。这些框架将通过为您的网站提供良好的架构来帮助您。 使用jQuery没有错。 OP 最有可能希望通过用户操作将页面加载到另一个页面中，而不是让它出现在页面加载中。对于 OP想要 做的事情，JS 是必需的。 对于动态添加的内容，是的，jQuery 是必要的，而 JohnDoe 的答案是一个很好的答案。但是，如果 OP 不想动态地（在页面加载后），我的答案应该是首选。 很多原因：index.html 充满了图形、js 和 css，所以我只想加载一次，使用小的 PHP 文件来填充/刷新相同的目标 div。这就是 AJAX 的意义所在，不是吗？ 为了您的需要，我同意 AJAX 是一种方式。

以上是关于jQuery - 如何在另一个页面中填充 div的主要内容，如果未能解决你的问题，请参考以下文章

jquery load数据之后 然后在另一个div中载入数据中的第一个a标签的内容

如何让一个div悬浮在另一个div上面，在线等

如何使用jQuery在另一个页面上获取cookie值？

我如何为我的页面提供一个div，不仅可以显示背景图片，而且可以填充页面的其余部分？

jquery手机iphone页面闪烁

如何使用ajax在另一个页面中滑动表单