将数据从一页上的表拉到另一页上
到目前为止，我只使用HTML、CSS、js和Jquery，我不会尝试引入SQL或任何需要第三方软件的东西。现在，我有一个视频页面，我需要做的是建立一个系统，将从视频页面拉出前2-3个视频，并在索引页面上的“新视频”部分显示它们。
我不知道如何做到这一点，所以任何帮助是非常感谢。
回答 3
Stack Overflow用户
发布于 2019-06-28 21:35:29
如果我理解正确的话，您希望从视频页面(前三个视频标题)中获取一些数据，并将它们显示在索引页面上。
以下是您在完成此任务时面临的挑战：
- 索引页面最先显示(因此您无法(通过将其保存为localStorage格式)从一个页面“记住”以前显示的视频标题，然后在另一个页面上重新显示它们)。LocalStorage在这种情况下将不起作用logic
- javascript将向网页的所有访问者显示这三个视频标题，因此您无法将它们存储在本地计算机上-它们必须存储在服务器上。
- HTML是一种标记语言，而不是编程语言，因此您不能将其用于，否则HTML是一种基于浏览器的语言，并且只能在本地运行-因此它与服务器的交互极其有限。
尽管如此，js/jQuery确实有一种叫做AJAX的东西，它允许您向服务器发送额外的请求-包括jQuery $.load()方法，它允许您将文件从服务器加载到当前页面。因此，您可以加载整个index.html页面并花费大量精力去除不需要的内容，也可以将所有视频存储为单独的文件并使用.load()加载-在视频页面和索引页面上的列表中。
如果您的and服务器允许PHP，那么另一个选择是将PHP添加到您的技能列表中。PHP是一种驻留在服务器上的语言，就像HTML一样，但具有HTML所缺少的编程功能。PHP可以创建HTML代码并将其注入到页面中--但它只能在构建页面时执行此操作，而不能在页面呈现并显示给用户之后执行此操作(为此，您将使用javascript)。
要使用PHP，您必须将所有页面从.html重命名为.php -它们将继续工作。事实上，你现在可以用你所有的页面来做这件事了--试试吧。它们的工作原理是一样的。唯一的区别是，在以.php结尾的页面上，您可以在PHP-ON和PHP-OFF标记之间添加PHP代码，如下所示：
<?php
include name_of_my_file.php;
?>上面的PHP指令与jQuery $.load()指令的作用非常相似--它将名为name_of_my_file.php的文件的内容注入到渲染页面的该位置。
使用PHP，你可以将视频列表存储在服务器上的一个单独的文件中，在index.php和videos.php页面上，你都可以有PHP部分读取这些文件并循环标题，在一个字符串变量中创建all_videos.php代码，然后你可以echo ( PHP“写到屏幕”命令)到网页上所需的位置。
Stack Overflow用户
发布于 2019-06-28 21:23:10
要使用jQuery选择视频页面上的前2-3个视频，请尝试如下所示：
//for the first 3:
$('video info selector').slice( 0, 3 );
//for the first 2
$('video info selector').slice( 0, 2 );然后，您可以使用jQuery的.each()方法遍历您的选择并提取索引页面所需的视频信息。
对于仅使用JavaScript的方法，请使用querySelectorAll()获取视频页面上的所有视频信息：
let videoInfo = document.querySelectorAll("video info selector");然后，您可以像这样访问videoInfo中的前2-3个视频：
let vid1 = videoInfo[0];
let vid2 = videoInfo[2];
let vid3 = videoInfo[3];然后你可以从你的索引页的节点中提取任何你需要的信息。
一旦你有了这些信息，你就可以按照其他人的建议将它保存到localStorage。有关localStorage的更多信息，请参阅here。
对于你的情况，LocalStorage似乎是一种可行的方法，但你应该意识到，考虑到你的情况，它确实有一些缺点：
- 如果你想在你的索引页面上显示任何视频信息，这种方法要求用户在访问你的索引页面之前先访问你的视频页面。
- 只有当用户再次访问您的视频页面时，才会更新索引页面上的信息。localStorage中的
- 项目不会自动过期，因此，如果用户在离开一段时间(一个月一周等)后返回到您的索引页面，而没有首次访问您的视频页面，他们可能会看到过时的信息，前提是新视频会定期添加到您的网站。
如下所述，'.load()‘可能是什么样子的。您必须根据特定的DOM结构更新代码：
$(function() {
$('#video1').load('video.html .video-link1');
$('#video2').load('video.html .video-link2');
$('#video3').load('video.html .video-link3');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- video.html-->
<body>
<div class="video-link1">
<img src="videoscreenshot1">
<span>Video Title1</span>
<video src="video1"></video>
</div>
<div class="video-link2">
<img src="videoscreenshot2">
<span>Video Title2</span>
<video src="video2"></video>
</div>
<div class="video-link3">
<img src="videoscreenshot3">
<span>Video Title3</span>
<video src="video3"></video>
</div>
<div class="video-link4">
<img src="videoscreenshot4">
<span>Video Title4</span>
<video src="video4"></video>
</div>
<div class="video-link5">
<img src="videoscreenshot5">
<span>Video Title5</span>
<video src="video5"></video>
</div>
</body>
<!-- index.html -->
<body>
<div id="video1"></div>
<div id="video2"></div>
<div id="video3"></div>
</body>
Stack Overflow用户
发布于 2019-06-28 19:41:10
使用本地存储的概念，它将帮助您将数据从一个页面读取到另一个页面
https://stackoverflow.com/questions/56798673
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号