0

Прошу помочь. Есть страница Index.html где пользователь вводит какой-либо текст. Скрипт зашифровывает этот текст. Подразумевается, что после ввода текста пользователь будет его разгадывать. Он нажимает кнопку и зашифрованный текст выводится на другой странице, например result.html Пытался сделать двумя способами:

  1. Через import
  2. Через вот такую функцию $(document).ready(function(){$.get("result.html", function(data) { $('#left').html($('#mixedtext',data).html() ) }); });

В обоих случаях выдало вот такую ошибку:

Access to XMLHttpRequest at 'file:///D:/education/DREAM_STARTING/proba_textarea/result.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Почитал, что пишут про это. Нельзя обращаться к страницам напрямую, надо через сервер Я только начал изучать программирование, не силен во многих вопросах. Хотел сделать свой первый сайт без использования серверного программирования. Получается у меня это не получится? Надо изучать Node.js Ajax PHP. Подскажите.

6
  • передачу информации между страницами можно организовать через local(session) storage
    – Bald
    16 июл 2020 в 6:43
  • передать данные на стороне клиента, на сегодняшний день можно только одним способом - обращением к хранилищу, используя localStorage.
    – rabbit
    16 июл 2020 в 6:44
  • вам в качестве ответа расписать здесь пример работы localStorage? сделаете по аналогии
    – rabbit
    16 июл 2020 в 6:48
  • В качестве сервера может быть использован как php так и node.js что использовать решать вам, что лучше что хуже весьма субъективно, используйте что нравится больше.
    – Bald
    16 июл 2020 в 7:49
  • @sergeykuznetsov а так же cookies, websql, indexeddb, serviceworker или даже через url 16 июл 2020 в 8:15

3 ответа 3

1

Вот простой пример работы localStorage, на одном из моих проектов. В примере все расписал. Можете сделать свой пример по аналогии. Но все же, я советую Вашу задачу реализовать на стороне сервера.

$(document).ready(function () {

  $('button').on('click', function () {

    var value_one = $('.field_one').val(); /*Берем значение из поля_1*/
    var click_one = 1; /*Счетчик*/

    localStorage.setItem("value_ls", value_one); /*Заносим значение поля_1 в хранилище*/
    localStorage.setItem("value_click", click_one); /*Заносим значение счетчика в хранилище*/
    
    document.location.href = '/ссылка_на_необходимую_страницу'; /*переходим на страницу, где будем получать переданное значение*/

  });


  var value_two = localStorage.getItem("value_ls"); /*Получаем значение поля_1 из хранилища*/
  var click_two = localStorage.getItem("value_click"); /*Получаем значение счетчика из хранилища*/

  if (click_two == 1) { /*Проверяем значение счетчика. Если был клик, а значит, поле передалось не пустое, то...*/
    $('.field_two').val(value_two); /*Заносим значение поля_1*/
    localStorage.removeItem("value_ls"); /*Удаляем контейнер, где хранилось значение поля_1*/
    localStorage.removeItem("value_click"); /*Удаляем контейнер, где хранилось значение счетчика*/
    localStorage.clear(); /*Очищаем хранилище*/
  } else {} /*...Если не было клика, то ничего не происходит*/

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1

Передать данные с одной страницы на другую можно без использования localStorage и серверного программирования и библиотек. Допустим есть 2 HTML-файла:

index.html:

<textarea id=txt></textarea><br />
<button onclick="location.href='result.html?'+txt.value"> отправить в result.html </button>

result.html:

<script>
var result = location.search.substring(1);
alert(result);
</script>

Если на странице в первом файле ввести текст и нажать на кнопку, то во втором файле алерт на странице во втором файле выведет этот текст. Почитайте ещё статью на это тему: Передача и обработка данных в html-файле

1
  • Олег, мне очень понравился метод, что Вы прислали, только не понял как передать несколько переменных. Можете подсказать?
    – Дима
    19 июл 2020 в 11:28
0

О передаче нескольких переменных с одной страницы на другую. Допустим, пусть это будет на примере с тремя полями для ввода текста на первой странице с ID соответственно txt1, txt2 и txt3. Тогда код кнопки для отправки переписываем так:

<button onclick="location.href='result.html?'+txt1.value+'&'+txt2.value+'&'+txt3.value"> отправить в result.html </button>

На второй странице код приёма переписываем так:

<script>
var result = location.search.substring(1).split("&");
for(i = 0; i < result.length; i ++){
    alert(result[i]);
}
</script>

, где result теперь не переменная, а массив значений из всех полей.

Есть ещё такой вариант передачи данных с одной страницы на другую:

index.html:

<form action="result.html" method="get">
<input type=text name=txt1 />
<input type=text name=txt2 />
<input type=text name=txt3 />
<input type=submit value=" отправить в result.html ">
</form>

result.html:

<script>
var result = location.search.substring(1).split("&");
for(i = 0; i < result.length; i ++){
    alert(result[i].split("=")[1]);
}
</script>

Этот вариант чуть сложнее для более сложных случаев. Теперь каждая ячейка массива result представляет собой не значение поля в целом, а строку типа txt1=privet, т. е., пару ключ=значение, где каждый ключ совпадает с атрибутом name поля, из которого отправлено это значение.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.