Передача данных между различными HTML страницами - PullRequest
Новая
       1

Передача данных между различными HTML страницами

2 голосов
/ 06 января 2020

Я новичок в PHP и очень потерян.

Я работаю с HTML5, CSS3, jQuery и Bootstrap 4.

У меня есть всего 4 HTML страниц на моем сайте. На первой странице есть 4 квадрата с текстом (скажем, A, B, C и D), пользователь выбирает один из этих квадратов и затем нажимает кнопку «Далее». При нажатии этого «следующего» пользователя происходит переход на страницу 2, но эта страница должна быть обновлена ​​в соответствии с выбором пользователя на странице 1 (A, B, C или D). Точно так же данные со страницы 2 и страницы 1 необходимо перенести на страницу 3.

Я читал о том, как делать это с помощью URL, AJAX, PHP сессий и еще нескольких вещей, но так как я новичок в этом, я очень запутался.

Пожалуйста, укажите, как я могу передавать данные между различными страницами?

РЕДАКТИРОВАТЬ: я не использовал формы.

Ответы [ 4 ]

2 голосов
/ 06 января 2020

Этот метод зависит от цели, это одна из фундаментальных концепций и компонентов веб-разработки.

  1. Если вы хотите сохранить или записать свое взаимодействие с пользователем (для электронной коммерции или в социальных сетях) вам понадобится передать данные на сервер в какой-то момент (возможно, после использования объекта локального хранилища), есть 2 часто используемых механизма PHP дает нам возможность передавать данные от клиента сторона сервера: $ _GET & $ _POST через HTML from, и они могут сохранять использованные файлы cookie или сеансы
  2. Если данные, передаваемые между страницами, никогда не будут служить какой-либо цели для сайта функция , тогда можно использовать объект локального хранилища, объект локального хранилища особенно полезен, когда большие объемы данных могут храниться на клиентском компьютере пользователя, вместо того, чтобы извлекать этот дорогой ресурс по запросу, чтобы улучшить взаимодействие с пользователем и минимизировать работу сервера. нагрузка
2 голосов
/ 06 января 2020 
<html>

    <head>
        <title>Passing data among different HTML pages</title>

        <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>

    </head>

    <body>
        <div>
            <p>Section-A</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <input type="hidden" name="dataA" id="dataA" value="sample data A"/>
            <button class="send_data" value="A">Next</button>
        </div>

        <div>
            <p>Section-B</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <input type="hidden" name="dataB" id="dataB" value="sample data B"/>
            <button class="send_data" value="B">Next</button>
        </div>

        <div>
            <p>Section-C</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <input type="hidden" name="dataC" id="dataC" value="sample data C"/>
            <button class="send_data" value="C">Next</button>
        </div>

        <div>
            <p>Section-D</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <input type="hidden" name="dataD" id="dataD" value="sample data D"/>
            <button class="send_data" value="D">Next</button>
        </div>


    </body>
</html>
<script>

    $(document).ready(function() {
     
        $(".send_data").click(function(event){
      
            var url="";
            let sec = $(this).prop("value");
            let data = $('#data'+sec).val();

            if (sec=="A"){
                url = 'demoA.html';
            } else if (sec=="B"){
                url = 'demoA.html';
            }
            else if (sec=="C"){
                url = 'demoA.html';
            }
            else if (sec=="D"){
                url = 'demoA.html';
            }

            var form = $('<form action="' + url + '" method="post">' +
                '<input type="text" name="data" value="'+data+'" />' +
                '</form>');
            $('body').append(form);
            form.submit();

        });
      
    });
</script>
1 голос
/ 06 января 2020

Вы можете использовать локальное хранилище, следующий пример определенно вам поможет.

на HTML страница 1: 

window.onload = function() {
   var sqa = prompt("square: ","A");
   localStorage.setItem("SQA",sqa);
}

На HTML страница 2: 

window.onload = alert(localStorage.getItem("SQA"));

Вы можете использовать куки, но лучше использовать хранилище, так как запрос страницы не отправляется на сервер.

1 голос
/ 06 января 2020

Вы можете сделать это с помощью localstorage

Первая страница: (первая. html) 

localStorage.setItem("square_first", "A");

Вторая страница: (второй. html) 

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

Нет похожих вопросов

...