gpt4 book ai didi

javascript - 点击 nav-element loads/includes new content/file.php into div id ="include"

转载 作者:太空宇宙 更新时间:2023-11-04 13:41:02 25 4
gpt4 key购买 nike

我正在寻找将 php 文件中的一些内容加载到我页面的 div 中的最佳(快速、不需要很多性能、易于理解等)方法。

我不知道用 php 好还是 javascript 好?如果是javascript,我觉得就不用jquery了吧?

解决方案应该 100% 有效(w3c、jshint 等)。

在第一页加载时:应该加载某些特定的包含文件,还是只显示我的 div 的原始内容?

不应重新加载整个页面,只需重新加载 div/单击导航链接时应替换 div 的内容。

(加载/包含的文件的名称无关紧要,所以我不想要一个只加载名称为 file_1.php ... file_9.php 的文件的解决方案。)

文件中也只有纯 html,就像我将其直接写入 html 文件的 div 一样。

应该包含的文件是例如调用了about.php、contact.php、services.php……

我的 html/php 文件如下所示:

<html>
</html>
<body>
<div id="container">
<div id="nav">
<ul>
<li><a href="imports/some_name.php">...</a></li>
<li><a href="imports/something_else.php">...</a></li>
<li><a href="imports/well_whatever.php">...</a></li>
</ul>
</div>
<div id="content">
<div id="include">
</div>
</div>
</div>
</body>

最佳答案

在我看来,在 div 中引导内容的最佳方式是使用 jQuery。它将与主要浏览器兼容,并且易于实现。

实际上我在我的一个应用程序中使用了这个解决方案

$(document).on('click', '#nav a', function(event) {
var url = $(this).attr('href');
$.ajax(url).done(function(response, status) {
if (status !== "error")
{
$("#include").html(response);
}
});
event.preventDefault();
});

解释:

$(document).on('event', 'filter', handler) 是一个绑定(bind)的函数由“过滤器”过滤的每个“事件”的处理程序函数。

(更多信息请访问 jQuery Documentation .on())

在处理程序内部,我使用了一个名为 .ajax() 的 jQuery 函数,它接收一个 url 作为参数(如果需要的话还有一些选项),并使用 defered.done() 调用回调函数。

此回调接收 response 数据、status 字符串和 xhr 对象,如 jQuery 文档中所述。 (在这种情况下我们不使用 xhr 对象,那么我们可以将其从函数中移除)

首先我检查状态是否不是错误。然后我选择“#include”元素(jQuery 使用类似 css 的选择器语法),并使用 html 函数将响应放入 #include div。

最后,我使用 event.preventDefault() 来避免浏览器尝试访问链接。


但是,如果要使用纯 JavaScript,则需要处理不同的浏览器行为,并且需要很长时间才能实现 100% 兼容。

关于javascript - 点击 nav-element loads/includes new content/file.php into div id ="include",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22715131/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com