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-js tutoriel-php.cn

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

1897 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

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

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!