有 2 个页面，如何通过第一个按钮上的单击事件来更改第二个页面的内容？

Question

这是我的问题， 我有一个名为 page1 的页面（我在此页面中有一个按钮可以访问另一个名为 page2 的页面）。 我想通过 page1 按钮上的单击事件来更改 page2 中特定选择器的内容。 这是我在 pug 中第 1 页的代码

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

这是我在 pug 中的 page2 代码

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 而不是 page2 本身。 谢谢你的帮助，对不起我的英语！

Answer 1

您似乎误解了jQuery.get() 的工作原理。

来自文档：

jQuery.get( url [, data ] [, success ] [, dataType ] )

返回：jqXHR

说明：从服务器加载数据使用 HTTP GET 请求。

基本上，您从“page2”获取内容作为字符串并将其存储在名为data 的变量中。这是单行道。当您调用 $data.find('#termineExam').text("section changed"); 时，您正在修改局部变量 而不是实际的 page2 文件

当您导航到 page2 时，您请求的是 page2 文件的全新副本，而没有您在第 1 页上对该字符串应用的任何修改。

如果您想实际修改page2 的内容，您将需要某种服务器端脚本（如 php）来接受来自 page1 的新数据并更新 page2 文件。

或者，如果您只想将一些数据发送到第 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 && (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);
      }
});