在不刷新页面的情况下更改内容或包含文件
Change Content or Include File Without Refreshing Page
我有一个菜单和一个内容div。当用户单击菜单项时,将显示内容div,页面平滑滚动到内容div 的顶部。这是我的代码:
<div id="content">
<div id="section1">
<a id="bir" href="#icerikBaslik">1</a> <!-- This -->
<a id="iki">2</a>
<a id="uc">3</a>
<a id="dort">4</a>
</div>
</div>
<div id="icerikDiv">
<h1 id="icerikBaslik">Deneme</h1>
<p>Random content</p>
</div>
当用户单击"a id 1,(由此注释)"时,#icerikDiv 显示并滚动页面。使用此 jQuery 方法:
$('html, body').animate({
scrollTop: $(selector).offset().top
}, 1000);
};
$(document).on('click', '#content a', function () {
$('#icerikDiv').show();
scrollToElement($(this).attr('href'));
});
菜单项就是这样。问题是,我不想失去流畅的滚动,因此我不希望刷新页面。
当用户单击另一个链接时,必须更改 #icerikDiv 的内容。页面仍会滚动到 #icerikDiv 但内容会有所不同。这就是我想要的。
如果可能的话,我想将内容数据保存在php文件中。如"菜单1.php"、"菜单2.php"等。
当用户单击链接时,我可以在不刷新页面的情况下将相关的 php 文件包含在 #icerikDiv 中吗?
我想到了:
- 为每个链接提供特定方法
- 在它们内部,显示 #menuXcontent 并滚动到 #menuXcontent
- 在同一页中写下所有内容,显示:无;
- 例如,单击菜单6链接时,显示 #menu6content 并滚动到它
但我不喜欢这样。我相信有更好的方法。
您有两个主要选项。一种就像您描述的那样,将所有内容包含在一个页面中并根据需要显示。这是一个经常使用的可行解决方案。优点是一旦页面加载,它的响应速度就非常快,因为当您单击链接时,它不需要从服务器获取数据。缺点是初始页面加载会大得多。它通常适用于各个部分非常小的网站。
第二个选项是使用 ajax 从服务器获取内容,而无需重新加载页面。Ajax 可用于从服务器获取数据或 html。如果你有一个 php 文件,它给出了你想要的 html 输出,你可以使用 .load 方便的方法:
$( "#icerikDiv" ).load( "menu1.php" );
这将从menu1.php获取数据并将其放入 #icerikDiv。
为了避免对 php 文件进行硬编码,我们可以使用一个 data 属性,以便在每个链接上声明源代码 -.HTML:
<a id="bir" href="#icerikBaslik" data-content="menu-1.php">1</a>
Javascript:
$(document).ready(function() {
$('#content a').click(function () {
$( "#icerikDiv" ).load( $(this).data('content') );
$('#icerikDiv').show();
scrollToElement($(this).attr('href'));
});
});
将div 目标放在 data 属性上并将 href 用于源 php 可能更有意义 - 但它无论哪种方式都可以工作。
您可以通过 ajax 调用从 php 文件加载内容,并使用 javascript 将其附加到页面上所需的任何位置。
阅读 ajax:http://www.w3schools.com/ajax/http://api.jquery.com/jquery.ajax/
一个简单的例子是:
$("#loadcontent").on("click", function(e){
$.ajax({
type: "get",
url: "loadcontent.php",
success: function(content){
$("#contentdiv").html(content);
}
});
});
这会将#contentdiv
的内容更改为从loadcontent.php
回声的内容。
- 如何将Bundle中的javascript文件包含到一个trick文件中
- 如何使用webpack将全局JS文件包含到我的React项目中
- 如何在从外部连接时将外部文件包含到node-js项目中
- 包含的文件中引发引用错误..除非调用文件包含慢速代码
- 如何使用浏览器“需要”配置文件,但不将此文件包含在捆绑包中
- 如何将 XML 文件包含在摩卡测试用例中
- 为什么我的 ajax 调用没有生成,因为我包含 ajax 的 js 文件包含在 iframe 中
- AngularJS应用程序:如何将.js文件包含到index.html中
- 执行批处理文件的Javascript,该文件包含基于每个会话的环境变量设置
- 如何将php文件包含到我的html文件中
- 如何将 CSS 和 JS 文件包含在 PHP 模板中
- gulp文件包含和翡翠嵌套问题
- 如何将一个 JavaScript 文件包含在另一个 JavaScript 文件中 这不是从浏览器中运行的
- 在服务器端环境或命令行环境中将一个 javascript 文件“包含”到另一个文件
- Mutilpe JS文件包含在另一个js文件中有时不起作用
- 如何将属性传递给 PHP 中的 JS 文件包含
- 将带有 php 和 javascript 变量的 php 文件包含在 ajax 文件中
- 用PHP创建的文本文件包含页面代码
- 我想使用 JavaScript 将外部 PHP 文件包含在 HTML 页面中
- shadow-root:有没有办法将外部JavaScript文件包含在shadow-root中