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 поля, из которого отправлено это значение.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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