在HTML中构造复杂表单的正确方法

Question

这让我发疯了，几个小时的谷歌搜索和RTFM‘’ing也没有帮助。我需要知道专家如何处理一个跨多个div的表单。我的第一个选择是把一个表格放在所有的div周围，然后求助于祈祷：

(JSfiddle):码

<div class='A'>
   <form id='fooForm' method='post' action='foo.php'>
      <div class='B1'>
         ...
      </div>
      <div class='B2'>
         <div class='B2-1'>
            ...
         </div>
         <div class='B2-2'>
            ...
         </div>
      </div>
   </form>
</div>

但是这导致了所有的东西都聚集在一起。

结果：

​

相反，我决定将表单移到虚拟表单中，然后处理更新值的问题，然后使用jquery.submit方法，如下所示：

(JSfiddle):码

<div class='A'>
   <div class='B1'>
      ...
   </div>
   <div class='B2'>
      <div class='B2-1'>
         ...
      </div>
      <div class='B2-2'>
         ...
      </div>
      ... 
   </div>
</div>
<form id='fooForm' method='post' action='foo.php'>
</form>

现在看上去就像我想要的样子

结果：

​

但是现在我必须通过创建虚拟的input和select元素并在每次用户进行更改时更新它们的值来创建所有的值，或者在调用form.submit之前在结束时这样做。我的问题是，是否可以只使用jQuery的post()方法来模拟表单的功能？我理解表单提供了自动打包和将值发送到服务器的好处，但是它们太严格了。

Answer 1

是的，您可以随心所欲地用$.post()发送，严格地说，您甚至不需要表单元素，只需将正确的数据对象传递给函数即可。

如果仍然要使用适当的形式，可以使用第一个jquery序列化方法从输入中获取值。http://api.jquery.com/serialize/

Answer 2

就结构而言，使用html、、list、来构造表单中的所有内容。

<form id="form1" >
<ul>
<li><input /></li>
<li><select></li>
</ul>
</form>

然后，通过使用jquery将所有表单元素发送到服务器，使用表单序列化提交表单。

若要防止页面刷新，请使用event.preventDefault()

代码：

$('#submit').on("click",function(event) {
event.preventDefault( );
$.post("url",$('#form-id').serialize( ),function(data){}); }
}