javascript 菜单栏和表单
Posted
技术标签:
【中文标题】javascript 菜单栏和表单【英文标题】：javascript menubar and form 【发布时间】：2013-10-07 20:51:08 【问题描述】：我的主页“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 月 11 日更新 实际上，即使有了 CP500 的回答，我也没有取得太大进展。 这是另一个简化的示例： 当我加载页面contact.html时，我希望此页面加载到页面index.html的部分中 我尝试使用该代码，但实际上它不起作用（contact.html 中的代码）：
<script>
$(function()
$.get( "contact.html", function( data ) $("index.html:section").html(data););
)
</script>
我不知道如何强制在 index.html 部分中加载contact.html...
谢谢！
【问题讨论】：
您还需要 ajax 来加载表单结果。还有一个 preventDefault() 【参考方案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 菜单栏和表单的主要内容，如果未能解决你的问题，请参考以下文章