有2個頁面，如何通過第一個按鈕上的click事件更改第二個頁面的內容？

Question

這是我的問題，我有一個名為page1的頁面（此頁面中有一個按鈕可以訪問另一個名為page2的頁面）。 我想通過page1的按鈕上的click事件更改page2中特定選擇器的內容。 這是我的帕格第1頁的代碼

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

這是我在哈巴狗中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文件的全新副本，而沒有在page1上對該字符串應用的任何修改。

如果要實際修改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 */

在第1 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);
      }
});