为什么通常 <form> 用于聚合元素而不是 <div> 以防表单与 ajax 提交事件一起使用？答案

【问题标题】：Why usually <form> used to aggregate elements and not <div> in case when form working with ajax submit event?为什么通常 <form> 用于聚合元素而不是 <div> 以防表单与 ajax 提交事件一起使用？
【发布时间】：2010-07-09 08:47:33
【问题描述】：

为什么通常<form> 用于聚合元素，而不是<div> 以防表单处理 ajax 提交事件？

ajax jquery 函数：

$('#parse-form').submit(function() {
        $.ajax({
            url: 'controller.php',
            type: 'POST',
            dataType:'json',
            success: function(data) {
                alert(data);
            }
        });
        return false; 
    });

方式 1 - 形式：

<form>
 <input type="text"/>
 <button type="submit">submit</button>
</form>

Way2 - div：

<div>
 <input type="text"/>
 <button type="submit">submit</button>
</div>

（可能是因为当用户按下时输入提交的表单，但网页中的表单超过1个？）

更新： 如果写表单的原因是因为javascript disable state true：

1.表单将有2个选项ajax提交和常规提交的代码中应该添加什么？

2.当我们有使用 jquery ui 或其他 javascript 库 ui（菜单、目录等）的网站时，是否会发生此原因。

谢谢

【问题讨论】：

标签： javascript jquery html forms

【解决方案1】：

可能的原因不止一种形式，但更大的问题是关闭 javascript 的用户的优雅降级 - 仅使用 div 会锁定任何禁用 JS 的用户。

【讨论】：

【解决方案2】：

这个想法是，如果关闭 Javascript，用户仍然可以以传统方式提交表单。

【讨论】：

【解决方案3】：

因为 HTML 规范不太关心 Javascript，并且任何类型的输入元素如果没有关联的操作，因此在 HTML 中没有表单元素是毫无意义的。

【讨论】：

输入元素在表单之外是有效的。

【解决方案4】：

致你的更新：

设计网页时应使用默认提交系统，并用JS覆盖
您应该对您在整个网站上使用的每一项功能进行优雅降级

【讨论】：

【解决方案5】：

我发现非常好的教程 jquery + Ajax + PHP 是出于优雅降级的原因，这使得表单标签成为唯一合适的选择。

http://sholsinger.com/archive/2009/08/gracefully-degrading-ajax-php-jquery/

【讨论】：