关于表单(Form)

<form action="#" method="get/post"><label for="name">姓名：</label><input type="text" name="name" id="name" /><input type="radio" name="sex" value="male" />male<input type="radio" name="sex" value="female" />female<input type="checkbox" name="favorite" value="sing" />sing song<input type="checkbox" name="favorite" value="sport" />sport<select name="shoe"><option value="35">35ma</option><option value="37">37ma</option></select><input type="submit" value="submit" /></form>

1.成功控件

浏览器并不是将所有的表单控件全部发送到服务器的，而是会查找所有的【成功控件】，只将这些成功控件的数据发送到服务端。

那么，什么是成功控件呢？简单说，成功控件就是：每个表单的控件都应该有一个name属性和【当前值】，在提交时，它们将以

【name=value】的形式将数据提交到服务器端，也即【action】的地址。这个算法逻辑由浏览器自身来处理。

对于一些特殊情况，成功控件还有以下规定：

a.控件不能是禁用状态，即指定【disabled="disabled"】的控件不是成功控件。
b.对于【checkbox】来说，只有被勾选的才算是成功控件。
c.对于【radio button】来说，只有被勾选的才算是成功控件。
d.对于【select】控件来说，只有被勾选的项才算是成功控件，name是select标签的属性。
e.对于【file】上传文件控件来说，如果它包含了选择文件，那么它将是成功控件。
2.提交方式
如果是【post】，那么表单数据将放在请求体中被发送出去。
如果是【get】，那么表单数据将会追加到查询字符串中，以查询字符串的形式提交到服务端。
建议：
表单通常还是以post方式提交比较好，这样可以不破坏url，况且url还有长度限制及一些安全性问题。
但是，get请求能够解决因post请求引起的【405 method not allowed】问题。
3.数据编码
控件输入的内容并不是直接发送的，而是经过一种编码规则来处理的。目前基本上只会使用两种编码规则：application/x-www-form-urlencoded 和 multipart/form-data
这两个规则的使用场景简单说就是：后者在上传文件时使用，其他情形则默认使用前者。
使用地点：<form action="" method="" enctype="multipart/form-data">    =>上传文件
4.浏览器处理表单可分为四个阶段
a.识别所有的成功控件
b.为所有的成功控件创建一个数据集合，它们包含【control-name/current-value】这样的键值对。
c.按照【form.enctype】指定的编码规则对前面准备好的数据进行编码。编码规则放在请求中，用content-type指出。

d.提交编码后的数据。

*****关于ajax提交表单*****

//其实它是模拟浏览器提交表单，悄悄完成浏览器提交表单的四个步骤，而不用服务器地址跳转。$('#btnSubmit').click(function(){$.ajax({type:'post/get',url:'handle.aspx',data:$('#form').serialize(),//模拟浏览器的成功控件筛选逻辑，搜罗键值对。success:function(responseText){}});return false;//阻止控件的默认提交行为。});//============补充==========：//1. ajax的data参数会自动提供url拼接，且可以加上编码$.ajax({type:'get',url:url,data:{id:2,name:"aaa",xxx:"想写多少就写多少",encoding:"utf-8"//如果需要编码就写在这里吧},beforeSend:function(){},//数据返回之前，给个loading等待什么的吧error:function(){},//要是出错了就给个提醒吧success:function(responseText){}//成功了，你看着办吧});//2.若配合【jquery.form.js】插件，表单的ajax提交就更简单了：$('#form').ajaxForm({success:function(responseText){}//可见是插件完成了成功控件筛选逻辑，并将数据悄悄发送到服务器端。});