如何使用JQuery在主页中加载.html文件？
[英]How to load .html files in the Home page with JQuery?
问题描述
I have created single page application. 
我已经创建了单页应用程序。 I used ColdFusion 2016, JQuery, JavaScript, HTML5 and Bootstrap 3. I tried to keep it simple and so far everything is running just fine. 我使用了ColdFusion 2016，JQuery，JavaScript，HTML5和Bootstrap3。我试图使其保持简单，到目前为止一切都很好。 One thing that I would like to change is the way .html files are loaded in my application. 我想更改的一件事是.html文件在应用程序中的加载方式。 Here is the current code example: 这是当前的代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="animated_favicon1.gif">
<link rel="stylesheet" href="CSS/Home.css">
<cfif SysAdmin EQ 1><link rel="stylesheet" href="CSS/Admin.css"></cfif>
<!---*** Start: JQuery 3.3.1 version. ***--->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!---*** End: JQuery 3.3.1 version. ***--->
<!---*** Start: Bootstrap 3.3.7 version files. ***--->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-confirmation/1.0.7/bootstrap-confirmation.min.js"></script>
<!---*** End: Bootstrap 3.3.7 version files. ***--->
</head>
<body>
<div id="main-container" class="container">
<nav class="navbar navbar-custom">
<div class="container-fluid">
<p class="navbar-text"><span class="glyphicon glyphicon-home"></span> <b>Welcome to Example Application!</b></p>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a>
<ul id="main-menu" class="dropdown-menu">
<li class="active"><a href="/user-page" data-container="user-container">User</a></li>
<cfif SysAdmin EQ 1><li><a href="/admin-page" data-container="admin-container">Administrator</a></li></cfif>
</ul>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-user"></span>JohnM</a>
</li>
<li>
<a href="#" data-toggle="confirmation" data-popout="true" role="button" id="log_out">
<span class="glyphicon glyphicon-log-in"></span> Logout</a>
</li>
</ul>
</div>
</nav>
<div id="user-container"><cfinclude template="User.html"></div>
<cfif SysAdmin EQ 1><div id="admin-container"><cfinclude template="Admin.html"></div></cfif>
</div>
<cfinclude template="Modal.html">
<script language="javascript" src="JS/Home.js"></script>
<cfif SysAdmin EQ 1><script language="javascript" src="Admin.js"></script></cfif>
</body>
</html>
Then here is the function that controls which container will be displayed on the screen first and the way user can switch and show different container: 然后是下面的功能，该功能控制将首先在屏幕上显示哪个容器以及用户可以切换和显示其他容器的方式：
$("#main-menu li a").on('click', mainMenu);
function mainMenu(e) {
e.preventDefault();
var itemID = $(e.target).attr('data-container');
$(this).parent().addClass('active').siblings().removeClass('active');
$('#main-container > div[id="' + itemID + '"]').show();
$('#main-container > div:not([id="' + itemID + '"])').hide();
}
On page load this code is triggered: 在页面加载时，将触发以下代码：
$(document).ready(function(){
// Trigger on click function on the main menu element.
$('#main-menu').find('a[data-container="user-container"]').trigger('click');
});
I'm wondering if there is a better way to load .html containers in JQuery? 我想知道是否有更好的方法在JQuery中加载.html容器？ I read one article where they showed small framework Sammy.js . 我读了一篇文章，他们展示了小型框架Sammy.js 。 I'm not sure if that is necessary for me to use or there is other ways to achieve this. 我不确定这是否对我有用，或者有其他方法可以实现。 If anyone can provide some example that would be great. 如果有人可以提供一些示例，那将是很好的。 Thank you. 谢谢。
3 个解决方案
解决方案1
2 2018-10-01 15:54:23
$(document).ready(_ => {
const $content = $('#content');
$.get('content.html')
.done(data => $content.html(data))
.fail(($xhr, errorMsg) => $content.text(`Error: ${errorMsg}`));
})
解决方案2
1 2018-10-01 15:35:26
Try to use .load in Jquery and assign it on a container 尝试在Jquery中使用.load并将其分配到容器上
<script> $(document).ready( function() { $("#load_home").on("click", function() { $("#content").load("content.html"); }); }); </script>
解决方案3
1 2018-10-01 16:10:31
我始终只是将其直接嵌入HTML中，这样我可以看到发生了什么并确保逻辑流程。
<script>$("#mydiv").load("something.html");</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.