Отображение данных на следующей странице с помощью сеанса jQuery или другим возможным способом?

вот моя простая форма:

<form id = "myform">
    Name:<input type = "text" name = "name"><br>
    Email:<input type = "text" name = "email">
    <a class = "btn btn-primary" id = "click_btn">Submit</a>
</form>

Я хочу отправить форму с помощью Ajax, пока этот бит в порядке, и отправка.

Вот мой код jquery: $ (документ) .ready (функция () { $ ('# click_btn'). on ('click', function () {

    $.ajax({
      url: $('myform').attr('action'),
      data: $('myform').serialize(),
      method: 'post',

      success: function(data) {
        //success meseg then redirct
        alert('success');

        var data = $('#myform').serializeArray();

        var dataObj = {};

        $(data).each(function(i, field) {

          dataObj[field.name] = field.value;
          window.location.href = 'next_page.php';
        });
      }

    })


  });
})

next_page.php - это то место, куда я хочу получить доступ, например:

<?php echo document.write(dataObj["email"]); ?>

Я хочу получить доступ к этим значениям формы, которые я отправил на следующей странице после отправки формы. Я создал объект данных со всеми значениями с помощью jQuery после отправки, но все же у меня нет доступа на следующей странице. Есть ли какая-либо концепция, связанная с session в jquery для хранения этого массива.

После успешного выполнения вызова ajax вы можете перенаправить пользователя на новую страницу, передав значения в адресной строке как параметры.

b0y 06.07.2018 10:13
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
1 478
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Ответ принят как подходящий

Я думаю, здесь вы путаете пару понятий; Я не имею в виду снисходительность, просто пытаюсь быть полезным.

jQuery и весь JavaScript существует только на стороне клиента (для практических целей - есть исключения, когда некоторый клиентский код может быть отрисован или скомпилирован на стороне сервера по любой причине, но это другое дело). PHP, как и любой другой серверный язык, существует на стороне сервера. Эти двое не могут напрямую обращаться к области видимости друг друга - вот почему AJAX полезен для передачи данных между передней и задней частями.

В основном то, что вы, кажется, делаете здесь, - это загрузка данных на стороне клиента, но не отправка ничего на сторону сервера. На самом деле вы не выполняете никаких запросов AJAX. Когда вы перенаправляете пользователя через window.location.href =..., данные фактически не передаются - он просто дает браузеру команду отправить новый запрос GET на next_page.php (или куда бы вы его ни указали).

Есть несколько вариантов сделать то, что вы пытаетесь достичь:

  1. Фактически отправьте запрос AJAX, используя описанные здесь методы http://api.jquery.com/jquery.ajax/. Затем вы можете использовать next_page.php, чтобы захватить данные и сохранить их в сеансе и вызвать их, когда пользователь заходит на страницу.
  2. Храните данные в клиентском cookie.
  3. Используйте стандартный HTML <form method = "next_page.php"...><input type = "submit">, чтобы браузер перенаправлял данные формы в сценарий next_page.php.
  4. Есть еще несколько вариантов, но я думаю, что это самые простые.

Чтобы уточнить, загрузка данных в dataObj[field.name] = field.value; на стороне клиента доступна только на стороне клиента, тогда как вы пытаетесь вызвать dataObj["email"] на стороне сервера - к сожалению, данные не передаются волшебным образом, поэтому PHP не знает, что JavaScript / jQuery выполнялся, если вы явно не указали это. Я надеюсь, что в этом есть смысл.

Ewan 06.07.2018 10:24
 <?php echo document.write(dataObj["email"]); ?>

Это необоснованно! echo - это команда PHP, а document.write - это команда JavaScript. Если второстепенная страница - это PHP, почему бы не отправить данные с помощью простой отправки POST из HTML-формы?

Вы также можете использовать localStorage:

var data = '123';
localStorage['stuff'] = data;

Используйте localStorage.clear();, чтобы удалить все данные, если вы хотите записать их снова, или для конкретного элемента используйте localStorage.removeItem('stuff');

Вы можете полностью использовать sessionStorage! (Вот документация)

Если пользователь переходит на следующую страницу на той же вкладке, sessionStorage может легко сохранить ваши данные и повторно использовать на следующей странице.

// set in page A
window.sessionStorage.setItem('youdata', 'youdata');
// or window.sessionStorage['youdata'] = 'youdata';

// get in page B
var youdata = window.sessionStorage.getItem('youdata');
// or var youdata = window.sessionStorage['youdata'];

Это оно! очень простой!

Если вы откроете новую вкладку, вы можете использовать localStorage. (Вот документация)

Использование localStorage похоже на использование sessionStorage.

При сохранении информации для других страниц эти два метода требуют только поддержки браузеров.

Список некоторых возможных решений выглядит следующим образом:

1. Опубликуйте данные, используя запрос AJAX, и получите их на следующей странице, выполнив вызов БД (рекомендуется).

2. Используя локальное хранилище, вы можете сохранить данные в браузере, чтобы отправить их на next_page.phphttps://www.w3schools.com/Html/html5_webstorage.asp.

2а. На первой странице

<script>
    localStorage.setItem("name", "John");
    localStorage.setItem("email", "[email protected]");
</script>

2b. На второй странице

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

3. Использование хранилища сеансов браузера https://www.w3schools.com/jsref/prop_win_sessionstorage.asp

3а. На первой странице

<script>
    sessionStorage.setItem("name", "John");
    sessionStorage.setItem("email", "[email protected]");
</script>

3b. На второй странице

<script>
    var name = sessionStorage.getItem("name");
    var emaeil = sessionStorage.getItem("email");
</script>

Другие вопросы по теме