Отправить данные в другой файл html - PullRequest
Новая
       2

Отправить данные в другой файл html

0 голосов
/ 24 января 2020

Я пытаюсь получить определенные данные из моей базы данных на моей странице (1) HTML и отобразить их на странице (2) HTML.

Мои коды для (1) html file: 

<html>

<head>
    <script src="example.js"></script>
</head>

<body>
    .
    .
    .
    <button item="' + count + '" onclick="getData(this)">Example</button>
    .
    .
    .
</body>

</html>

И JS для него: 


        .
        .
        .
        var currentIndex = 0;

        //This function is to display the details of an individual item
        function getData(element) {
            var request = new XMLHttpRequest();

            request.open("GET", "/theroute", true);
            request.setRequestHeader("Content-Type", "application/json");
            request.onload = function () {
                var example = JSON.parse(request.responseText);

                var item = element.getAttribute("item");
                currentIndex = item;

                document.getElementById("data1").textContent = example[item].name;
                document.getElementById("data2").src = example[item].age;
            }
            request.send();
        }
        .
        .
        .

Я хочу получить эти данные на моей (2) HTML странице (например): 

<html>

<head>
    <script src="example.js"></script>
</head>

<body>
    <h4 id="data1"></h4>
    <h4 id="data2"></h4>
</body>

</html>

Я видел это Получите данные из одного html файла и отобразите его, используя другой html файл , но я не уверен, как использовать это для моего случая здесь.

Извините, я новичок в этом, поэтому было бы очень полезно дать подробное объяснение вашего решения. Я использую только ваниль JS, поэтому, пожалуйста, не jQuery. Любая помощь будет оценена

1 Ответ

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

Я надеюсь, что это может оказаться полезным для вас. Для кнопки (ей) пользовательский атрибут item заменен эквивалентом dataset, чтобы гарантировать, что html является действительным. Обычно я бы предложил также использовать внешние обработчики событий вместо добавления onclick=getdata() к встроенным элементам, но для краткости они остаются. Функция, вызываемая нажатием кнопки, создает соответствующую строку запроса для отправки в конечную точку (для вас). это будет /theroute?id=X&name=Y&age=Z et c), который запрашивает базу данных и отправляет ответ обратно. Ответ используется для создания меню гиперссылок, по которым пользователь нажимает на странице 2. Я думаю, это то, что вы пытались объяснить. Вы можете скопировать весь код и создать новую страницу, чтобы увидеть ее в действии. 

<?php

    if( $_SERVER['REQUEST_METHOD']=='GET' && !empty( $_GET['item'] ) ){
        ob_clean();

        /* 
            emulate "/theroute" and send some data back to the ajax callback.

            This data would really be fetched from the database but below is
            simply randomly generated data for display/test purposes.
        */


        $payload=[];
        $item=$_GET['item'];
        for( $i=0; $i < 10; $i++ ){
            $payload[]=[
                'id'    =>  $i,
                'name'  =>  'Geronimo '.uniqid().' '.$item,
                'age'   =>  mt_rand(16,80)
            ];
        }
        exit( json_encode( $payload ) );
    }

?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <script>
            function getData( e ) {
                var xhr = new XMLHttpRequest();
                var ul=document.getElementById('menu');
                /* The above PHP code is to emulate the real endpoint /theroute */

                xhr.open( "GET", location.href +'?task=fetch&item='+e.target.dataset.item, true );
                xhr.setRequestHeader( "Content-Type", "application/json" );
                xhr.onload = function() {
                    var json = JSON.parse( xhr.response );
                    json.forEach(obj=>{

                        var id=obj.id;
                        var name=obj.name;
                        var age=obj.age;

                        var li=document.createElement('li');
                            li.appendChild( createhyperlink(id,name,age) );                     
                        ul.appendChild( li );
                    });
                }
                xhr.send();
            }

            function createhyperlink(id,name,age){
                var a=document.createElement('a');
                    a.href='page2.html?id='+id+'&name='+name+'&age='+age;
                    a.innerHTML='View '+name;
                return a;
            }

        </script>
    </head>
    <body>
        <ul id='menu'></ul>
        <?php
            for( $i=1; $i <=10; $i++ ){
                echo "<button data-item='{$i}' onclick='getData(event)'>Example #{$i}</button>";
            }
        ?>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...