Maison > interface Web > js tutoriel > 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

巴扎黑
Libérer: 2017-06-30 14:26:58
original
1909 Les gens l'ont consulté

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(,,);
Copier après la connexion

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");
Copier après la connexion
    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


3. Utilisation de la charge du cadre de mise en page
$("#p1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){    if(statusTxt=="success")
      alert("外部内容加载成功!");    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
Copier après la connexion

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

JavaScript

dans 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&#39;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>
Copier après la connexion

Page chargée :


Capture d'écran de l'effet :
<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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal