Отправить данные одной страницы на другую страницу в HTML - PullRequest
0 голосов
/ 25 февраля 2020

Здесь я пытаюсь отправить данные с одной страницы на другую HTML страницу. Я попытался с помощью метода window.load и localStorage, но не смог получить вывод. У меня есть таблица с заголовком и кнопкой при нажатии на кнопку, текущее название строки будет отображаться на странице b. html. Может ли кто-нибудь предложить мне в правильном направлении.

a. html

<body>
 <table class="at-items-block">
  <thead></thead>
   <tbody>
          <tr>
          <td class="at-int-sn">
        <h2 class="at-IntHdr">test</h2>
        <ul>
            <li><b>bbb</b> bbb</li>
            <li><b>bb</b> bb</li>
        </ul>
    </td>
    <td class="at-int-dl1">
        <h2>6.2<span class="time-sep">hrs</span></h2>
        <span class="todownload">to download*</span>
    </td>
    <td class="at-int-dl2">
        <h2>55<span class="time-sep">min</span></h2>
        <span class="todownload">to download*</span>
    </td>
    <td class="at-int-dl3">
        <h2 class="at-IntHdr">11<span class="time-sep">min</span></h2>
        <span class="todownload">to download*</span>
    </td>
    <td class="at-int-price">
        <h2 class="atr"><span>$</span>1444<span class="per-month"> per mon*</span></h2>
        <span class="check-info">text here<br>
        text here<br>
        text here</span>
    </td>
    <td class="at-item-btn"><a href="b.html" class="at-int-btn">send</a></td>

</tr>
<tr>
  <td class="at-item">
    <h2 class="at-title">Title2 Here</h2>
  </td>
  <td class="at-item-btn"><a href="b.html">send</a></td>
</tr>
 </tbody>
  </table>
 </body>
  <script>
   window.onload = function() {
   var getTitle = document.getElementsByClassName("at-title");
  localStorage.setItem("itemsTitle",getTitle);
}
</script>

b. html

<div class="titleFetch">
<div class="titleHere"></div>
<div class="check-info"></div>
</div>
  </body>
 <script>
  window.onload = document.getElementsByClassName("titleFetch").innerHTML = 
  localStorage.getItem("itemsTitle");
  </script>

Ответы [ 2 ]

1 голос
/ 25 февраля 2020

JS, который вы указали на странице index.html (первая html), не будет работать, вам нужно заменить его на следующее,

    window.onload = function() {

    const buttons = document.querySelectorAll('.at-item-btn');

    const passData = (getTitle) => {
        localStorage.setItem("itemsTitle",getTitle);
    }

    buttons.forEach((el,i) => {
        el.addEventListener('click', passData.bind(this, el.previousElementSibling.textContent))
    })

 } 

Здесь вам нужно получить все кнопки и нужно сделать addEventListener () для каждой кнопки и передать соответствующий заголовок в качестве параметра функции и установить его в localstorage setItem, например,

const passData = (getTitle) => {
    localStorage.setItem("itemsTitle",getTitle);
}

Затем в b.html измените сценарий, чтобы заменить полученный заголовок, например,

window.onload = function() {
    document.getElementsByClassName("titleFetch")[0].textContent =
    localStorage.getItem("itemsTitle");
} 

Рабочий пример здесь

0 голосов
/ 25 февраля 2020

По моему мнению, лучшим способом были бы методы PHP -GET (например, как в PHP)

$var = $_GET['mode']
//to Use this you have to change your link, for example b.html?mode=YourString
//here you have the string right from the '='-character

в качестве альтернативы, если вы хотите использовать этот метод с JavaScript -Only Вы можете использовать этот метод

let endingString = "";
let workingString = window.location.href;
let boolpath = false;

for(var i = 0; i < workingString.length; i++)
{
    if (boolpath)
    {
        endingString += workingString[i];
    }
    else if (workingString[i] == '?') {
        boolpath = true;
    }        
}
//to Use this you have to change your link, for example b.html?hallo123
//here you have the complete string in the right of the '?'-mark
//b.html?hallo123 -> endingString="hallo123"

Я лично рекомендую JavaScript -подход

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...