Перенос данных из одного файла HTML в другой

Я новичок в HTML и Javascript, что я пытаюсь сделать из файла an HTML, я хочу извлечь все, что там установлено, и отобразить его в another HTML файле через Javascript

Вот что я сделал до сих пор, чтобы проверить это:
<Б > testing.html

<html>
<head>
   <script language="javascript" type="text/javascript" src="asd.js"></script>
</head>

<body>

<form name="form1" action="next.html" method="get">
name:<input type ="text" id="name" name="n">
<input type="submit" value="next" >
<button type="button" id="print" onClick="testJS()"> Print </button>
</form>

</body>
</html>

next.html

<head>
   <script language="javascript" type="text/javascript" src="asd.js"></script>
</head>

<body>

<form name="form1" action="next.html" method="get">
<table>
    <tr>
        <td id="here">test</td>
    </tr>
</table>
</form>

</body>
</html>

asd.js

function testJS()
{

var b = document.getElementById('name').value

document.getElementById('here').innerHTML = b;

}

test.html → ads.js (извлечение значения из test.html и установка next.html) → next.html

ОТВЕТЫ

Ответ 1

Попробуйте этот код: В test.html

function testJS() {
    var b = document.getElementById('name').value,
        url = 'http://path_to_your_html_files/next.html?name=' + encodeURIComponent(b);

    document.location.href = url;
}

И в next.html:

window.onload = function () {
    var url = document.location.href,
        params = url.split('?')[1].split('&'),
        data = {}, tmp;
    for (var i = 0, l = params.length; i < l; i++) {
         tmp = params[i].split('=');
         data[tmp[0]] = tmp[1];
    }
    document.getElementById('here').innerHTML = data.name;
}

Описание: javascript не может обмениваться данными между разными страницами, и мы должны использовать некоторые решения, например. URL get params (в моем коде, который я использовал таким образом), cookie, localStorage и т.д. Сохраните параметр имени в URL-адресе (? name=...) и в URL-адресе next.html и получите все параметры с предыдущей страницы.

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

Ответ 2

Старомодный способ установки глобальной переменной, которая сохраняется между страницами, - это установить данные в Cookie. Современный способ - использовать локальное хранилище, которое имеет хорошую поддержку браузера (IE8 +, Firefox 3.5+, Chrome 4+, Android 2+, iPhone 2+). Использование localStorage так же просто, как использование массива:

localStorage["key"] = value;

... in another page ...
value = localStorage["key"];

Вы также можете присоединить обработчики событий для прослушивания изменений, хотя API-интерфейс событий немного отличается между браузерами. Подробнее о теме.

Ответ 3

Предполагая, что вы говорите об этом js в среде браузера (в отличие от других, таких как nodejs), к сожалению, я думаю, что то, что вы пытаетесь сделать, невозможно просто потому, что это не так, как должно работать.

Страницы Html доставляются в браузер через HTTP-протокол, который является протоколом "без гражданства". Если вам все еще нужно передавать значения между страницами, может быть 3 подхода:

  • Сессионные файлы cookie
  • HTML5 LocalStorage
  • Отправьте переменную в URL-адрес и верните их в next.html через window object

Ответ 4

Вы можете просто отправить данные, используя window.location.href Сначала сохраните значение для отправки из testing.html в теге script, переменная say

<script> 
  var data = value_to_send
  window.loaction.href="next.htm?data="+data
</script>

это отправка через запрос на получение

Ответ 5

<html>
<head>
<script language="javascript" type="text/javascript" scr="asd.js"></script>
</head>

<body>

<form name="form1" action="#" method="get">
name:<input type ="text" id="name" name="n">
<input type="submit" value="next" >
<button type="button" id="print" onClick="testJS()"> Print </button>
</form>

</body>

скрипты на стороне клиента

function testJS(){
var name = jQuery("#name").val();
jQuery.load("next.html",function(){
jQuery("#here").html(name);
});
}

jQuery является библиотекой js и упрощает его программирование. Поэтому я рекомендую использовать jQuery rathar, затем js. Здесь я просто взял значение input elemnt (id = name) на событие отправки кнопки отправки, а затем загрузил нужную страницу (next.html), если функция загрузки выполняется успешно, я вызываю функцию, которая будет помещать данные в нужное место.

Функция загрузки jquery http://api.jquery.com/load/

Ответ 6

С классом Javascript localStorage вы можете использовать локальное хранилище вашего браузера по умолчанию для сохранения пар (ключ, значение), а затем извлекать эти значения на любую нужную страницу, используя ключ. Пример - Pageone.html -

<script>
    localStorage.setItem("firstname", "Smith");
</script>

Pagetwo.html -

<script>
    var name=localStorage.getItem("firstname");
</script>

Ответ 7

Ниже приведен пример кода для передачи значений с одной страницы на другую с использованием HTML. Здесь данные со страницы 1 передаются на страницу 2 и извлекаются с использованием javascript.

1) page1.html

<!-- Value passing one page to another 
     Author: Codemaker
-->
<html>
    <head>
        <title> Page 1 - Codemaker</title>
    </head>
    <body>
        <form method="get" action="page2.html">
            <table>
                <tr>
                    <td>First Name:</td>
                    <td><input type=text name=firstname size=10></td>
                </tr>
                <tr>
                    <td>Last Name:</td>
                    <td><input type=text name=lastname size=10></td>
                </tr>
                <tr>
                    <td>Age:</td>
                    <td><input type=text name=age size=10></td>
                </tr>
                <tr>
                    <td colspan=2><input type=submit value="Submit">
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

2) page2.html

<!-- Value passing one page to another 
     Author: Codemaker
-->

<html>
    <head>
        <title> Page 2 - Codemaker</title>
    </head>
    <body>
        <script>
            function getParams(){
                var idx = document.URL.indexOf('?');
                var params = new Array();
                if (idx != -1) {
                    var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
                    for (var i=0; i<pairs.length; i++){
                        nameVal = pairs[i].split('=');
                        params[nameVal[0]] = nameVal[1];
                    }
                }
                return params;
            }
            params = getParams();
            firstname = unescape(params["firstname"]);
            lastname = unescape(params["lastname"]);
            age = unescape(params["age"]);
            document.write("firstname = " + firstname + "<br>");
            document.write("lastname = " + lastname + "<br>");
            document.write("age = " + age + "<br>");
        </script>
    </body>
</html>

Ответ 8

Привет, я собираюсь оставить это здесь, потому что я не могу комментировать из-за ограничений, но я нашел ответ AlexFitiskin идеально, но небольшая коррекция была необходима

document.getElementById('here').innerHTML = data.name;

Это должно быть изменено на

document.getElementById('here').innerHTML = data.n;

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

Ответ 9

Я использую это, чтобы установить изображение профиля на каждой странице.

На первой странице установите значение как:

localStorage.setItem("imageurl", "ur image url");

или на второй странице получите значение как:

var imageurl=localStorage.getItem("imageurl");
document.getElementById("profilePic").src = (imageurl);