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

时间:2012-08-08 13:56:41

标签: php jquery jquery-selectors

我一直在敲我的脑袋一段时间,所以我会尽量简单:在页面A上的表单提交中,我想在页面C上的div内加载页面B的内容。 例如:

的login.html

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

user.php的

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

的index.html

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

最终结果(index.html)

“你好,JohnDoe”

我应该使用load()方法和URL作为第一选择器吗?

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

P上。 S。:所有页面都在同一个域中。

P上。 P. S。:我说INSIDE是一个不同的页面,而不是来自不同的页面。

4 个答案:

答案 0 :(得分:1)

这似乎需要改变

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

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

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

我将说明如何从一个页面,另一个页面调用脚本。我将有一个页面/窗口,我将调用主页面,另一个页面将调用。这些都不是非常奇特的标记。

他们将使用一些非常基本的脚本调用进行交互,甚至可以将信息来回传递给其他人。我将首先介绍每个标记,然后是每个标记。每个页面都在标题中链接了jQuery。

我的主要观点是,只要您获得对每个页面的引用,就可以使用此修改版本来告诉一个页面使用从其他页面实例化的脚本/动作来执行某些操作。我在我的例子中使用了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();
    });
});

答案 1 :(得分:1)

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

如果您想从target获取ID为user.php的div,请使用以下代码:

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

但您可能想发送帖子请求?

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

要学习的东西:

答案 2 :(得分:0)

最好的可能就是服务器端。

在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。

答案 3 :(得分:0)

user.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;
?>

按预期加载文件。如果有表格数据发布到文件,您将返回它。如果没有表单数据,但表单已经提交过,会话将捕获该表单并输出用户名。如果他们从未提交表单,但无论如何都要求页面,他们会得到“你是如何进入这个页面的”?