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

Question

这是我的问题， 我有一个名为page1的页面（我在此页面中有一个按钮来访问另一个名为page2的页面）。 我想通过page1按钮上的click事件更改page2中特定选择器的内容。 这是我在帕格的第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请求从服务器加载数据。

基本上，您正在从第2页＆＃39;第2页获取内容。作为字符串并将其存储在名为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);
      }
});