2

かなり基本的なことが欠けていると思いますが、jQuery と Javascript プログラミングの速度を上げ始めたところです。以前はPHPでサーバーサイドプログラミングをしていました。私は現在、HTML5 webapp のプロトタイプを作成している最中で、さまざまな画面が必要です。PHP は非常に簡単だったので、Smarty のようなサーバー側のテンプレートを使用するだけで完了できました。

ただし、アプリをより webapp のようにするために、ウィンドウをリロードせずに画面間を動的に変更したいと考えています。

私は自分の質問に対する回答となる可能性のあるいくつかのオプションを調べましたが、正しい軌道に乗っているかどうかはわかりません.

たとえば、JsRender、JsViews、または純粋な jquery load コマンドをチェックしました。しかし、これらのことで次のようなことができるかどうかはわかりません。

HEADER_PART
MAIN_CONTENT
FOOTER_PART (私が使用する一般的な JS ファイルへのリンクも含まれています)

MAIN_CONTENT 部分を動的に更新したいと考えています。現在、私のアプリケーションは 1 ページのみであり、そのページに属するすべてのカスタム ロジックは 1 つの JS ファイルにあります。この JS ファイルでは、単純な $(function() { ... を使用してページをロードするため、ページがロードされるたびに、ページの一部が非同期で更新されます。これは問題ありません。この特定のページのすべてのブロックがその1ページがロードされるときにロードする必要があります。

しかし、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 に答える