如何使用JavaScript / Jquery轻松实现屏幕/视图

How to realize screens / views with JavaScript / Jquery easily?

本文关键字：实现 屏幕 视图 Jquery 何使用 JavaScript      更新时间：2023-09-26

我确定我错过了一些非常基本的东西，但我才刚刚开始让自己跟上jQuery和Javascript编程的速度。以前我用PHP做服务器端编程。我现在正在为HTML5 webapp创建一个原型，我希望有不同的屏幕。现在有了PHP，这很容易，我可以使用像Smarty这样的服务器端模板并完成它。

但是，为了使我的应用程序更像Web应用程序，我想在屏幕之间动态切换而无需重新加载窗口。

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

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


HEADER_PART
MAIN_CONTENTFOOTER_PART(还包含指向我使用的常见JS文件的链接(

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

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

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

你能开导我吗？:)

谢谢和最好的问候，本斯

查看 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);
});

为了在不更改页眉和页脚的情况下将数据动态加载到页面中，您应该使用 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>
相关文章：