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，但我认为这不是最好的方法，因为我必须为一个菜单维护 2 个代码。

最好的方法是什么？（我是 javacsript / html 的新手）我想遵循最佳实践。1）有没有办法通过另一个页面调用 index.html 中的代码？2）有没有办法用javascript代码从另一个页面加载一个页面？

感谢您的帮助！

更新 11-oct 实际上，即使得到 CP500 的回答，我也没有取得太大进展。这是另一个简化的示例：当我加载页面 contact.html 时，我希望此页面加载到页面 index.html 的部分中我尝试使用该代码但实际上它不起作用（contact.html 中的代码）：

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

我不知道如何强制在 index.html 部分中加载contact.html ...

谢谢！

4

1 回答 1

0

您似乎暗示的方法是 AJAX，或（a）同步 HTTP 请求。使用 jQuery 或原生 XHR 你可以实现这个想法。

方法

$.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 回答