Javascript 使用Ajax更新除一个div之外的页面内容_Javascript_Jquery_Html_Ajax

Javascript 使用Ajax更新除一个div之外的页面内容

javascript jquery html ajax

Javascript 使用Ajax更新除一个div之外的页面内容,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我正在尝试创建一个使用AJAX加载所有页面的网站。下面是一个简单的JS代码： $.ajax({ url: url, type: 'GET', success: function(html) { document.open(); document.write(html); document.close(); } }); 这显然有效并更新了我当前的页面内容问题是我想保持一个div不变（我们称之为.player wrapper）。这个div实际上是一个包装器

我正在尝试创建一个使用

AJAX

加载所有页面的网站。下面是一个简单的

JS

代码：

$.ajax({
  url: url,
  type: 'GET',
  success: function(html) {
    document.open();
    document.write(html);
    document.close();
  }
});

这显然有效并更新了我当前的页面内容

问题是我想保持一个

div

不变（我们称之为

.player wrapper

）。这个

div

实际上是一个

包装器，我想继续玩它（这就是我将整个网站变成AJAXified的原因）。这是可能的吗？

如果您想在播放器包装类中保留音频标记，让我们将此html作为基础：

<body>
  <audio class="player-wrapper"></audio>
  <div class="page-content"></div>
</body>

只是不要将html写入文档，而是将其放置在一个已经存在的元素中，如本例中带有page content类的div

当您需要在html中执行脚本标记时，可以使用jQuery的append方法（因为您已经在使用jQuery）

如果您想在播放器包装类中保留音频标记，让我们将此html作为基础：

<body>
  <audio class="player-wrapper"></audio>
  <div class="page-content"></div>
</body>

只是不要将html写入文档，而是将其放置在一个已经存在的元素中，如本例中带有page content类的div

当您需要在html中执行脚本标记时，可以使用jQuery的append方法（因为您已经在使用jQuery）

您可以做的一件事是在编写之前复制.player包装器

$（.overridebutton”）。在（“单击”上，函数（）{
var html='我是一个新的div，覆盖除播放器包装器之外的所有内容'；
var exception=$（“.player wrapper”）.html（）；
console.log（异常）；
document.write（html+异常）；
});

你好，我是sub-1
你好，我是sub-2
你好，我是sub-3
我是玩家包装器
重写
您可以做的一件事是在编写之前复制.player包装

$（.overridebutton”）。在（“单击”上，函数（）{
var html='我是一个新的div，覆盖除播放器包装器之外的所有内容'；
var exception=$（“.player wrapper”）.html（）；
console.log（异常）；
document.write（html+异常）；
});

你好，我是sub-1
你好，我是sub-2
你好，我是sub-3
我是玩家包装器
覆盖
每次呈现页面时，您都可以像这样初始化插件/库：

const App=function（）{
返回{
init:function（）{
//在这里做你所有的JS工作
log（'App initialized'）；
},
呈现：函数（url）{
$.get（url，数据=>{
$（'main'）.html（数据）；
}，html'）。完成（（）=>{
this.init（）；
});
}
};
}();
$（函数（）{
App.init（）；
$（文档）。在（'click'，'data page=“ajax”]'上，函数（e）{
e、 预防默认值（）；
常量url=$（this.attr（'href'）；
App.render（url）；
});
});
每次呈现页面时，都可以像下面这样初始化插件/库：

const App=function（）{
返回{
init:function（）{
//在这里做你所有的JS工作
log（'App initialized'）；
},
呈现：函数（url）{
$.get（url，数据=>{
$（'main'）.html（数据）；
}，html'）。完成（（）=>{
this.init（）；
});
}
};
}();
$（函数（）{
App.init（）；
$（文档）。在（'click'，'data page=“ajax”]'上，函数（e）{
e、 预防默认值（）；
常量url=$（this.attr（'href'）；
App.render（url）；
});
});

是的，这是可能的。不要用返回的html覆盖整个文档。在编写之前，您需要从html中删除.player wrapper
。是的，这是可能的。不要用返回的html重写整个文档。在编写之前，您需要从html中删除.player wrapper
。这是我尝试的第一件事（更改
中的内容）。然而，像Gravity表单（表单的wordpress插件）、recaptcha等东西在我得到它们时不会被初始化。这就是为什么我现在尝试获取整个页面，并简单地保持这一个div
不变。啊，如果这是您的问题，我可以告诉您，当您将html动态添加到DOM时，不会执行标记。您可以从这个问题中尝试很多可能的答案：另一个选项（因为您已经在使用jQuery）是在jQuery中使用append函数。您可以使用它来执行html变量中的脚本：$（'.page content'）.append（html）；这是我尝试的第一件事（更改
中的内容）。然而，像Gravity表单（表单的wordpress插件）、recaptcha等东西在我得到它们时不会被初始化。这就是为什么我现在尝试获取整个页面，并简单地保持这一个div不变。啊，如果这是您的问题，我可以告诉您，当您将html动态添加到DOM时，不会执行标记。您可以从这个问题中尝试很多可能的答案：另一个选项（因为您已经在使用jQuery）是在jQuery中使用append函数。您可以使用它来执行html变量中的脚本：$（'.page content'）.append（html）；
$('.page-content').append(html);