jQuery的 - 如何在另一個頁面中填充一個div

我一直在打我的頭一陣子，所以我會盡可能簡單：在頁面A上的表單提交，我想加載的內容一個div內的網頁B上頁C. 示例：jQuery的 - 如何在另一個頁面中填充一個div

的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不同的頁面，而不是來自不同的頁面。

來源

2012-08-08 marziobs

是否有您不想使用會話的原因嗎？ – Ohgodwhy 2012-08-08 14:01:19

我希望你有一個填充牆讓你的頭是很好的保護從敲打:) – 2012-08-08 14:11:37

其實_I DO_使用會話，但我還需要填充裏面的index.html「目標」分區。 – marziobs 2012-08-08 14:14:57

最好的可能是做它服務器端。

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是必需的。

來源

2012-08-08 14:04:40 pikaille

我會補充說，一些PHP框架存在。這些框架將通過爲您的網站提供一個好的架構來幫助您。 – pikaille 2012-08-08 14:14:10

使用jQuery沒有任何問題。 OP最可能希望從用戶操作中將頁面加載到另一頁面，而不是在頁面加載時顯示該頁面。對於OP _wants_要做什麼，JS是必需的。 – Bojangles 2012-08-08 14:15:44

對於動態添加的內容，是的，jQuery是必要的，JohnDoe答案是很好的答案。但是，如果OP不想動態地（頁面加載後），我的答案應該是首選。 – pikaille 2012-08-08 14:20:38

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

負載如預期的文件。如果表單數據發佈到文件中，您將返回它。如果沒有表單數據，但表單之前已提交，會話將捕獲並輸出用戶名。如果他們從未提交表單，但仍然要求提供該頁面，他們會收到'您是如何訪問此頁面'的？

來源

2012-08-08 14:05:44 Ohgodwhy

好吧，原文與此非常相似，但是如何將此內容發送到index.html，_from_login.html中的「目標」div？ – marziobs 2012-08-08 14:12:59

@marziobs如果我們是在'網頁A（的index.html）'，我們將表單數據發送到'頁B（user.php'，我們希望將數據加載到頁面'C（login.html的） '，那麼你必須確保'page C'被'page A'打開，否則'javascript將無法訪問'，並且更多;你必須使用'window.open'來創建'頁C'或...好，'的JavaScript將無法獲得it' – Ohgodwhy 2012-08-08 14:17:16

這似乎需要改變

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

到

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

編輯：好吧，我會在一些一些非常基本的標記添加，希望有用的代碼。這不是特定於你的代碼，但這個概念應該是有用的，它只用幾個html頁就可以測試，沒有什麼奇怪的。

我將說明的是如何從另一頁的一個頁面調用腳本。我將有一個頁面/窗口，我將稱之爲主頁面，另一頁面爲兒童頁面。這些都不是很花哨的標記。

他們將使用一些非常基本的腳本調用進行交互，甚至將信息來回傳遞給每個其他人。我將首先介紹每個的標記，然後是每個腳本的標記。每個頁面都有jQuery鏈接在標題中。

我這裏主要的一點是，你可以使用這個修改後的版本，告訴一個頁面利用花葯頁面實例化的腳本/動作做一些事情，只要你到每一個頁面的引用。在我的示例中，我使用打開的窗口和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(); 
    }); 
});

來源

2012-08-08 14:10:33

因此第一選擇是關係到目標頁面，而不是開始一個？ – marziobs 2012-08-08 14:32:33

「的index.html＃目標」根本就不是一個有效的選擇的DOM元素 – 2012-08-09 13:46:38

變化$('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) 
});

東西要學：

來源

2012-08-08 14:13:05

Yesss！我正在尋找類似的東西！但在第一個示例中，腳本如何理解#target在「user.php」中，而不是「login.index」中？（只是好奇） – marziobs 2012-08-08 14:27:32

當您在jQuery'load'方法的文件名之後附加div id時jQuey加載具有指定文件名的文件並且找到具有指定標識的div – 2012-08-08 14:39:55

但#target在「index.html」中，而不在「user.php」。「user.php」只包含由服務器執行的代碼並注入到靜態「index.html」頁面的DOM中。 – marziobs 2012-08-08 14:46:16

jQuery的 - 如何在另一個頁面中填充一個div

回答

相關問題