Question

我正在尝试从另一个页面检索特定div框的内容，并且一些谷歌搜索建议jquery可能能够做到这一点，但我正在努力让它工作。我以前从未使用过jquery。

我正在尝试检索的内容位于webpage.com/test.html，div ID是“页面内容”。

我想在此处显示的页面位于webpage.com/folder1/folder2/page.html，代码为：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

<div id="div1"></div>

<script>
$("#div1").load("test.html #page-content");
</script>

</body>
</html>

我如何让它工作？是否有更好的替代方法？

Answer 1

您可以使用Ajax代码来解决此问题：

<script>
    $.ajax({
       url:test.html,
       type:'GET',
       success: function(data){
           $('#div1').html($(data).find('#page-content').html());
       }
    });
</script>

Answer 2

您有几种选择：

使用localstorage。这将允许您跨页面存储数据。计算test.html中的数据，将其加载到localstorage中，然后在另一页上获取它。

localStorage.setItem（“name”，“john”）; - ＆GT;插入数据

localStorage.getItem（ “姓”）; - ＆GT;稍后使用插入的数据
使用jQuery的加载方法，如此

$（“＃div1”）。load（“test.html＃page-content”）;

通常，jQuery允许您访问同一页面上的元素和数据。它允许您在加载后使用同一页面上的元素。如果元素中的数据 - test.html＃page-content是动态添加的，则只有在加载test.html后才可用。这就是为什么jQuery不能用于从另一个页面获取内容的原因。

Answer 3

根据你的文件信息和示例代码，我认为问题是test.html路径，试试这个：

<script>
$("#div1").load("../../test.html #page-content");
</script>

或

$("#div1").load("/test.html #page-content");

从另一个页面获取div框的内容

3 个答案: