Question

我想知道使用ajax调用在页面之间导航的正确方法。

一个例子，我们得到了这3个html页面。

users.html（使用users.js初始化它并具有自己的功能）
cars.html（使用cars.js初始化它并具有自己的功能）
bills.html（使用bills.js初始化它并具有自己的功能）

从users.html到cars.html的正确方法是什么？我遇到了这个问题，因为我不知道如何在users.html中执行ajax调用后“加载”cars.js。

¿如果我用$ .getScript（）加载它，如何在添加cars.js后删除users.js？

感谢。

Answer 1

您可以使用$ .get（）调用页面，如

$.get( "cars.html", function( data ) {
  $(document).html(data);
  alert( "Load was performed." );
});

在cars.js中使用$（document）.ready（）的所有函数但所有功能必须是：

$(document).on("yourevent","selector",function(){

});

当你加载页面cars.js将加载如果你在cars.html页面导入它详细了解jquery.get()和jquery.on()

Answer 2

您可以尝试构建SPA（单页应用程序）。您将拥有一个索引html文件，该文件使用其他html文件作为模板。例如，您有一个div主容器，其内容在单击链接时将替换为users.html / cars.html / bills.html。

路由可帮助您在不刷新页面的情况下完成此操作。它也支持历史查找依赖注入，以便您了解如何只下载您所依赖的js文件。

如果您不使用路由，并且只更改页面内容，则会丢失历史记录，这是一个非常简洁的事情。

SPA with Routing and Templating
Routing with Sammy.js

示例：

<body>
<a href="#/cars">Cars</a>
<a href="#/bills">Bills</a>
<div id="wrapper"></div>
<script src="jquery.js"></script>
<script src="sammy.js"></script>
<script>
    (function() {
        app.router = Sammy(function () {

            var selector = '#wrapper';

            this.get('#/cars', function() {
                $.get('cars.html', function (view) {
                    $(selector).html(view);
                });
            this.get('#/bills', function() {
                $.get('bills.html', function (view) {
                    $(selector).html(view);
                });                
            });

        });
        app.router.run('#/cars'); //Link to load on app opening
    }());
</script>
</body>

Answer 3

如果唯一的原因是页面转换（根据OP的评论），那么在每个页面上执行此操作似乎更好，而不是通过ajax加载页面内容。 OP似乎没有在项目中使用任何页面模板或母版页。

普通javascript中的示例：

<html>
  <body style="opacity:0; ">
    
    
    <h1>Page Title</h1>
    <img src="http://static.europosters.cz/image/750/metallschilder/fiat-500-i5193.jpg">
    
   <script type="text/javascript">
     
      var opacity = 0;
     
       var timerID = setInterval(
         function() {
           opacity += 5;
           if (opacity >=100) {
               clearInterval( timerId );
               opacity = 100;
            }
           document.body.style.opacity = opacity /100;
           
         }, 100);
 
   </script>
    
  </body>
  
</html>

JavaScript / jQuery - 页面之间的导航

3 个答案: