2

我确定我错过了一些非常基本的东西，但我刚刚开始让自己加快 jQuery 和 Javascript 编程的速度。以前我正在使用 PHP 进行服务器端编程。我现在正在为 HTML5 webapp 创建一个原型，我希望在其中有不同的屏幕。现在使用 PHP 非常简单，我可以使用 Smarty 之类的服务器端模板并完成它。

但是，为了让我的应用更像 webapp，我想在屏幕之间动态切换而不必重新加载窗口。

我已经研究了几个可能会回答我的问题的选项，但我不确定我是否走在正确的轨道上。

我检查了例如 JsRender、JsViews 甚至是纯 jquery 加载命令。但我不确定这些东西是否能让我拥有这样的东西：

HEADER_PART
MAIN_CONTENT
FOOTER_PART（还包含我使用的常见 JS 文件的链接）

我想动态更新 MAIN_CONTENT 部分。目前我的应用程序只有一个页面，我所有属于该页面的自定义逻辑都在一个 JS 文件中。在这个 JS 文件中，我使用一个简单的 $(function() { ... 来加载我的页面，所以每当它被加载时，我的页面的某些部分都会异步更新。这很好，因为我在这个特定页面中的所有块都会必须在加载该一页时加载。

但是，如果我有一个链接，例如 main.html#otherscreen，并且当我单击该屏幕时，我想更改我的 MAIN_CONTENT 并运行另一个页面加载特定的 JS 来处理另一个屏幕上的块，而不是第一页？

我知道我仍然可以使用服务器端模板并使用 AJAX 请求加载我的页面，但同样，不确定这是否是正确的方法。

你能启发我吗？:)

谢谢和最好的问候，本斯

4

2 回答 2

2

查看jQuery.load()。使用此功能，您可以将内容动态加载到页面上的 div 中，这是我认为您想要做的。只需在div要加载内容的页面上找到并调用

$('#mydiv').load(url, data, function(response){
    //do something once it's done.
});

根据您的评论...

这实际上很容易。.load()应该替换 div 中的内容（我认为。如果没有，请先调用.empty()）。当然，您可以花哨并添加效果，例如

function changePages(url) {
    $('#mydiv').fadeOut('fast', function() { 
        $(this).load(url, function(response){
            $('#mydiv').fadeIn('fast');
        });
    });
}

要处理 URL 中的哈希之类的事情，在您的点击事件中，您必须确保首先调用e.preventDefault()：

$('#mylink').click(function(e){ 
    e.preventDefault(); //e is a jquery event object
    var link = $(this);
    var hash = link.attr('href'); // get the hashtag if the href is '#something'
    changePages(someUrl + hash);
});
于 2012-05-02T06:02:21.337 回答
1

要在不更改页眉和页脚的情况下将数据动态加载到页面中，您应该使用 jQuery 的 AJAX 函数。它允许您向服务器发布请求并接收返回的数据，而无需重新加载页面。一个简单的例子是这样的：

<html>
    <head>
        <title>Example</title>
        <!-- Assuming jQuery is already referenced -->
        <script type="text/javascript">
            $('span.buttonish').click(function(){
                $.ajax({
                    // The URL can be a file or a PHP script of your choosing
                    // it can also be pure HTML without the <html> tags as they
                    // are already in your file
                    url: 'path/to/the/file/that/return/data',
                    success: function(receivedData) {
                        // The received data is the content of the file or the return
                        // data of the script and you can use it as you would with any data
                        $('#content').html(receivedData);
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="header">
        <!-- Something -->
        </div>
        <div id="content">
            <span class="buttonish">Click me to change the text... </span>
        </div>
        </div id="footer">
        <!-- Something -->
        </div>
    </body>
<html>
于 2012-05-02T07:18:17.100 回答