Question

我有一个带div区域的网页。在这个领域，可以有两种不同的形式。它看起来像这样：

表格1：

<div id="data" ...>
    <form action="/action1" method="post">
        <label for="label1">ID</label>
        <input type="text" name="id" id="label1" value="" />
        <label for="label2">Name</label>
        <input type="text" name="name" id="label2" value="" />
        <label for="label3">Description</label>
        <input type="text" name="desc" id="label3" value="" />
        <label for="label4">Address</label>
        <input type="text" name="address" id="label4" value="" />
     </form>
</div>

表格2：

<div id="data" ...>
    <form action="/action2" method="post">
        <label for="label1">ID</label>
        <input type="text" name="id" id="label1" value="" />
        <label for="label2">Firstname</label>
        <input type="text" name="first" id="label2" value="" />
        <label for="label3">Lastname</label>
        <input type="text" name="last" id="label3" value="" />
        <label for="label4">Address</label>
        <input type="text" name="address" id="label4" value="" />
        <label for="label5">eMail</label>
        <input type="text" name="mail" id="label5" value="" />
     </form>
</div>

所以有两种不同的形式。这些值将使用jQuery（对后端的Ajax调用）进行设置。

处理这两种形式的最佳方法是什么？我应该创建两个只包含表单的文件，并在需要时加载表单吗？（如果某些点击按钮1需要表单1，如果某人点击按钮2则需要表单2 - 事件在客户端处理）。或者我应该将两个表单放在单个HTML文件中并启用或禁用表单吗？

Answer 1

没有什么可以阻止你在HTML中同时隐藏/显示你想要活动的那个表格。你最好的选择是为每个表单（或其包含div）提供一个唯一的ID，并使用它来显示/隐藏使用jQuery。

Answer 2

我认为您应该将两个表单保留在同一页面中。并根据要求显示/隐藏所需的表格。

因为如果您将表单保存在单独的HTML文件中，并且用户单击任何按钮，那么您必须使XMLHttpRequest获取表单的HTML，而您可以轻松避免这些额外的HTML请求通过在同一页面中包含表单的HTML。

我不知道您的网站受众是否如此庞大。但保存单个HttpRequest应该非常有用。

请参阅文章 Minimize HTTP Requests by Yahoo developers 。他们明确建议尽量减少HTTP请求。

在一个网页中处理两个表单

2 个答案: