Имея 2 страницы, как изменить содержимое второй страницы с помощью события нажатия на кнопку на первой?

#javascript #jquery #html #ajax #pug

#javascript #jquery #HTML #ajax #pug

Вопрос:

Вот моя проблема, у меня есть страница с именем page1 (у меня есть кнопка на этой странице для доступа к другой странице с именем page2). Я хочу изменить содержимое определенного селектора на странице 2 с помощью события щелчка по кнопке на странице 1. Вот мой код для страницы 1 в pug

  form#abandonForm(name='btn' action='page2')
  button#abandonBtn.button Abandonner

Вот мой код для страницы 2 в pug

 section#termineExam

и вот мой файл .js

 $( document ).ready(function() {
  var $abandonBtn = $('#abandonBtn');
  $abandonBtn.click(function(){
    $.get('page2', null, function(data){
    var $data = $(data);
    console.log(data);
    console.log($data.find('#termineExam').html());
    $data.find('#termineExam').text("section changed");
    console.log($data.find('#termineExam').html()); // print the changes
    console.log(data); // print the same data without changes on the section

})
});
});

Я не понимаю, почему изменения применяются к DOM, но не к самой странице2.
Спасибо за помощь и извините за мой английский!

1. Что именно вы подразумеваете под «но не на самой странице2»? Вы ожидаете, что изменения, которые вы вносите на клиенте, будут фактически сохранены page2 на сервере?

2. Я имею в виду, что я не вижу изменений на странице 2, когда я запускаю код.

Ответ №1:

Вы, кажется, неправильно понимаете, как jQuery.get() это работает.

Из документов:

jQuery.get( url [, data ] [, success ] [, тип данных ] )

Возвращает: jqXHR

Описание: Загрузка данных с сервера с помощью HTTP-запроса GET.

По сути, вы получаете содержимое из ‘page2’ в виде строки и сохраняете его в переменной с именем data . Это улица с односторонним движением. При вызове $data.find('#termineExam').text("section changed"); вы изменяете локальную переменную, а не фактический файл page2

Когда вы переходите к page2 , вы запрашиваете совершенно новую копию page2 файла без каких-либо изменений, которые вы применили к этой строке на странице 1.

Если вы хотите фактически изменить содержимое page2 , вам понадобится какой-то серверный скрипт (например, php), который принимает новые данные со страницы 1 и обновляет файл страницы 2.

В качестве альтернативы, если вы просто хотите отправить некоторые данные на страницу 2 и отобразить эти данные при загрузке этой страницы, есть много способов сделать это.

Одним из вариантов было бы использовать `localstorage` :

Создайте файл, вызываемый storage.js с указанным ниже содержимым, и включите этот файл в оба page1 и page2

 /**
 * Feature detect   local reference for simple use of local storage
 * if (storage) {
 *    storage.setItem('key', 'value');
 *    storage.getItem('key');
 * }
 *
 */
var storage;
var fail;
var uid;
try {
  uid = new Date;
  (storage = window.localStorage).setItem(uid, uid);
  fail = storage.getItem(uid) != uid;
  storage.removeItem(uid);
  fail amp;amp; (storage = false);
} catch (exception) {}
/* end  Feature detect   local reference */

В page1 этом:

 $(document).ready(function() {
  var $abandonBtn = $('#abandonBtn');
  $abandonBtn.click(function() {
      if(storage){
        storage.setItem('termineExam', 'section changed');
      }
  });
});

Затем в page2 сделайте это:

 $(document).ready(function() { 
      if(storage){
        var text = storage.getItem('termineExam');
        if(text) $('#termineExam').text(text);
      }
});