Question

我的主页面“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 ...

谢谢！

Answer 1

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

jQuery方法

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

此方法要求您使用jQuery javascript库（免费和在线）。然后，这样做是向result.html发送GET请求，提供查询的输入值，并使用响应数据触发回调。

如果您的服务器运行PHP甚至RoR，您可以使用模板技术让服务器自动构建包含菜单模板的HTML。

PHP方法

<html>
<body>
<?php include 'menu.php'; ?>
...
</body>
</html>

javascript菜单栏和表单

1 个答案: