Maison > Article > interface Web > Utilisez la méthode de chargement de jquery pour concevoir un chargement dynamique et résoudre le problème de l'échec de JavaScript sur la page chargée
Utilisez la méthode de chargement de jquery pour concevoir un chargement dynamique et résoudre le problème de l'échec de JavaScript sur la page chargée
- 巴扎黑original
- 2017-06-30 14:26:581850parcourir
1. Analyse du problème
Tout le monde a une impression du système backend et connaît sa structure de présentation, comme le montre la figure :
Dans ceci mise en page, nous devons séparer l'en-tête, la barre latérale et le pied de page, et le contenu dans la partie centrale doit être modifié dynamiquement, c'est-à-dire que différentes pages sont positionnées selon différents menus, mais la mise en page globale ne changera pas
Cette structure de mise en page Pure HTML n'a pas la capacité d'intégrer diverses parties de contenu, nous devons donc trouver ou résoudre ce problème nous-mêmes. Étant donné que jquery a une bonne compatibilité et une bonne étendue d'utilisation,
utilise ici la charge de jquery. Méthode pour gérer ce framework Page Layout.
2. Explication détaillée de la méthode de chargement
1.定义 $().load(,,);
Le paramètre URL requis spécifie l'URL que vous souhaitez charger.
Le paramètre facultatif data spécifie l'ensemble de paires clé/valeur de chaîne de requête à envoyer avec la requête.
Le paramètre facultatif callback est le nom de la fonction à exécuter une fois la méthode load() terminée.
2. Exemple
Vous pouvez également ajouter des sélecteurs jQuery aux paramètres d'URL.
L'exemple suivant charge le contenu de l'élément avec id="p1" dans le fichier "demo_test.txt" dans l'élément
$("#p1").load("demo_test.txt #p1");
- Le paramètre de rappel facultatif spécifie la
- fonction de rappel
à autoriser lorsque la méthode load() se termine. La fonction de rappel peut être définie sur différents
$("#p1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success")
alert("外部内容加载成功！"); if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
1. Problèmes
Un problème courant rencontré par de nombreuses personnes sur Internet lorsqu'elles utilisent la méthode de chargement pour charger des pages dynamiques est que le code
JavaScriptdans la page chargée n'est pas valide. Cela est dû au fait que le fichier externe chargé par chargement. supprimera la partie Script, supprimez-la, donc lorsque le JavaScript de la page est appelé dans la page chargée, la fonction xxx ne sera pas définie. 2. Solution
- Pour l'en-tête, la barre latérale et le pied de page, qui contiennent uniquement du code HTML statique, utilisez load directement pour charger
- Le contenu correspondant au changement de contenu intermédiaire contient généralement le code JavaScript correspondant. Utilisez la méthode de chargement personnalisée (le code suivant). Tout en utilisant la méthode jquery.load() pour charger le contenu correspondant, utilisez la méthode de rappel de chargement pour traiter). le JavaScript Load, chargez le code JavaScript de la page chargée dans de cette façon, le contenu du contenu sera écrasé à chaque chargement (. ) est exécuté, il n'y a donc pas lieu de s'inquiéter d'un problème de chargement répété. Cela résout parfaitement le problème des js invalides sur la page chargée. Le code spécifique est le suivant :
- 4. Exemple de code
Page de mise en page :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css">
</head>
<body class="hold-transition skin-blue-light sidebar-mini" onload="onload();">
<p class="wrapper">
<p id="header">
</p>
<!-- Left side column. contains the logo and sidebar -->
<p id="sidebar">
</p>
<!-- Content Wrapper. Contains page content -->
<p id="content" class="content-wrapper clearfix">
<!-- Content Header (Page header) -->
</p>
<!-- /.content-wrapper -->
<p id="footer">
</p>
<!-- Add the sidebar's background. This p must be placed
immediately after the control sidebar -->
<p class="control-sidebar-bg"></p>
</p>
<!-- ./wrapper -->
<!-- jQuery 2.2.3 -->
<script src="../resources/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="../resources/bootstrap/js/bootstrap.min.js"></script>
<!--左侧菜单-->
<script src="../resources/dist/js/common/global.js"></script>
<script src="../resources/dist/js/menu/menuTemplate.js"></script>
<script src="../resources/dist/js/menu/menu.js"></script>
</body>
<script> //加载页面布局的header,sidebar,footer的内容
$("#header").load("inc/header.html");
$("#sidebar").load("inc/sidebar.html");
$("#footer").load("inc/footer.html");
/*
*加载变换内容，主要url参数为dom对象，并且该dom中的url放在href中，
*调用方式如：<span onclick="javascript:load(this);" href="/backstage/website/test.html">测试</span>
*注意：1.该dom对象最好不要用a标签，因为点击a标签会进入href指定的页面
* 2.要加载的内容要用 id="content" 标注，因为load中指明了加载页面中指定的id为content下的内容
* 3.对应页面的JavaScript写在content下 */
function load(url, data){ //alert($(url).attr("href"));
$.ajaxSetup({cache: false });
$("#content").load($(url).attr("href")+ " #content ", data, function(result){ //alert(result);
//将被加载页的JavaScript加载到本页执行
$result = $(result);
$result.find("script").appendTo('#content');
});
}</script>
</html>
Page chargée :
<p id="content">
<p>测试二</p>
<span onclick="javascript:load(this);" href="/backstage/website/test.html">测试</span>
<a href="javascript:test();">测试</a>
<script> function test(){
alert("测试二页面");
} </script>
<script> function test2(){
alert("ceshi");
} </script>
</p>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!