0

メニューバーに次のコードを含むメインページ「index.html」があります。

<head>
    <script>
    function eco_para(clicked_id) {
    clicked_id1="#" + clicked_id
    $("#home").removeClass("fired");
    $("#inputdata").removeClass("fired");
    $("#contact").removeClass("fired");
    $(clicked_id1).addClass("fired");
    {{$.get(clicked_id + '.html',function (data) { $('section').html(data)});};};
    }
    </script>
</head>
<body>
    <div class="wrapper">
        <header>
            <menu>
                <mi id="home" class="fired" onclick="location.reload()">Acceuil</a></mi>
                <mi id="inputdata" onclick="eco_para(this.id)">Calculateur</mi>
                <mi id="contact" onclick="eco_para(this.id)">Contact </a></mi>
            </menu>
        </header>
        <section>
        </section>  
    </div>
</body>

ページinputdata.htmlで、送信ボタンのあるフォームを使用します。

<form  method="post" action="result.html">
<input type="submit" value="Compute">
</form>

問題は、「送信」ボタンがページ「result.html」をロードし、メニューが消えることです。つまり、フォームのアクションが index.html ページの javascript を使用して result.html をロードしないため、メニューが失われます。

index.html のコードを result.html にコピー/貼り付けするという簡単で汚い解決策がありますが、1 つのメニューに対して 2 つのコードを維持する必要があるため、これが最善の方法だとは思いません。

続行する最良の方法は何ですか？(javacsript / html は初めてです) ベスト プラクティスに従いたいと思います。1) 別のページを介して index.html からコードを呼び出す方法はありますか? 2) JavaScript コードを使用して別のページからセクションにページをロードする方法はありますか?

ご協力いただきありがとうございます！

UPDATE 11-oct 実際、CP500 からの回答があっても、あまり進展がありませんでした。別の簡単な例を次に示します。ページ contact.html をロードするときに、このページをページ index.html のセクション内にロードする必要があります。そのコードを使用しようとしましたが、実際には機能しません (contact.html のコード):

<script>
$(function() {
$.get( "contact.html", function( data ) { $("index.html:section").html(data);});
})
</script>

contact.html を index.html のセクション内に強制的にロードする方法がわかりません...

ありがとう！

4

1 に答える 1

0

あなたがほのめかしているように見える方法は、AJAX、または（a）同期HTTPリクエストです。jQuery またはネイティブ XHR を使用すると、このアイデアを実現できます。

jQuery メソッド

$.get('result.html', 
     {'inputName': $('#inputID').val()},
     function(data) { [returned html is in 'data'] }
);

この方法では、jQuery JavaScript ライブラリ (無料でオンライン) を使用する必要があります。次に、GET 要求を に送信しresult.html、クエリの入力値を提供し、応答データを使用してコールバックを起動します。

サーバーが PHP や RoR を実行している場合は、テンプレート技術を使用して、メニュー テンプレートを含めることで配信される HTML をサーバーに自動的に構築させることができます。

PHP メソッド

<html>
<body>
<?php include 'menu.php'; ?>
...
</body>
</html>
于 2013-10-07T20:58:52.620 に答える