Перенос данных из одного файла 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);
