簡體   English   中英

如何將使用JavaScript創建的div傳遞給使用php的另一個頁面

[英]How to pass a div created with javascript to another page with php

創建它們后,我不知道如何在另一個頁面中顯示div。 當使用其功能創建div時,單擊按鈕后,它們將顯示在主頁的div中,此后,必須重定向到第二頁,並傳遞創建的div。

主頁的工作方式示例: Jsfiddle

我不知道如何在第二頁中發送和顯示剛剛創建的div。

我認為應該使用php設置操作,但我不知道...

重要

您不必了解Js代碼。 您只需要知道我想復制到第二頁的div開始就不存在。 因此,必須在創建div之后執行“復制到新頁面”操作。

主頁:

<html lang="it">
      <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <meta charset="UTF-8">
            <link rel="stylesheet" href="style.css"/>
        </head>
        <body>
<div id="faketxt" contenteditable>Write Here</div>
<button id='btn'>OK</button> <br>

<div id='boxes'>

</div>

<script type="text/javascript">

$('#btn').click(function() {
  var primo = document.getElementById('faketxt');
  var wordLimit = 145;
  var words = primo.textContent.replace(/(&lt;([^&gt;]+)&gt;)/ig,"").split(/\s/);
  if (words.length) {
    var count = 0;
    var div = createDiv();
    words.forEach(function(word) {
      if (++count > wordLimit) {
        count = 1;
        div = createDiv();
      }
      if (div.innerHTML) {
        div.append(' ');
      }
      div.append(word);
    });
  }
});

function createDiv() {
  div = document.createElement('div');
  div.className = 'fakes';
  document.getElementById('boxes').append(div);
  return div;
}

        </script> 

</body>
</html>

您不必只向整個div發送下一頁重新創建它所需的數據量。 也就是說,您可以使用Cookie並讓用戶記住:

document.cookie = "divinfo=The text field of the div's;\
                   path=/";

具有包含相關信息的隱藏輸入字段。

<input name="divinfo" hidden value="The info required for the creation of the div"/>

如果您使用cookie,則javascript可以在另一側重新創建數據(如果您使用隱藏輸入),則應該讓php重新創建它。

好吧,您至少有3種方法可以完成此操作,而所有這些都取決於如何在2頁之間傳遞足夠的信息:

1)您可能會在剛創建它們時獲取這些div的HTML,將其存儲在會話存儲中,然后從存儲的html重新創建div。 這樣,您不必對第二頁的div知道太多,但是可以存儲的數量是有限的。 另外,如果信息很敏感,可能會帶來一些安全/隱私風險,因此您可能必須進行一些額外的編碼才能緩解這種情況。

2)您可以根據用於在第一頁上創建索引的相同信息集在第二頁上重新創建這些div。 JS代碼可以在兩者之間共享。

3)使用服務器端生成div的內容。 這樣,您可以生成第一頁和第二頁的內容。

還是我想念這個問題?

  1. 在提交表單中創建隱藏的文本輸入
  2. 將新的div值添加到該隱藏的輸入中
  3. 提交表單將通過php將值發送到下一頁
  4. 現在使用php這樣在javascript中選擇該值

    var xyz ='';

  5. 現在您可以隨意使用此值

我不知道為什么帶有php標簽的值沒有顯示在這里:(

我建議進行一些更改。 首先,使用適當的形式-就像您在問題的第一版中一樣。

<form action="download.php">
  <input id="faketxt" type="text" value="Write Here" />
  <button id='btn'>OK</button>
</form>
<div id='boxes'></div>

現在,在第二頁上,您可以在表單字段“ faketxt”中獲得所需的所有信息,並且可以在此處創建div。 根據所使用的方法(POST / GET),您可以訪問以下數據:

<?php echo $_POST["faketxt"]; ?>

其次,我建議您稍微更改一下代碼,使其更具可讀性。

$('#btn').click(function() {
    var primo = document.getElementById('faketxt');
    var wordLimit = 5;
    var words = primo.value.replace(/(&lt;([^&gt;]+)&gt;)/ig,"").split(/\s/);

    while (words.length > 0){
       let div = createDiv();
       div.append(words.splice(0,wordLimit).join(" "));
    }
}); 

查看修改過的小提琴。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM