细说form表单

form表单是页面与web服务器交互过程中最重要的信息来源。

　　表单提交成功控件

　　浏览器是如何提交表单的？或者说浏览器在提交表单时需要做哪些事情？

　　浏览器并不是将所有的表单控件全部发送到服务器的，而是会查找所有的【成功控件】，只将这些成功控件的数据发送到服务端。（成功控件：每个表单中的属性都有一个name属性，和当前值，

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　在提交时它们将以name=value的形式作为提交数据的一部分）

　　对于一些特殊情况，成功控件还有以下规定：1.控件不能是【禁用】状态，即指定【“disabled=disabled"】，即禁用的控件不是成功的控件。

　　　　　　　　　　　　　　　　　　　　　　2.如果一个表单包含了多个提交按键，那么仅当用户点击的那个提交按钮才算是成功的控件。

　　　　　　　　　　　　　　　　　　　　　　3.对于checkbox控件来说，只有被用户勾选的才算是成功控件。

　　　　　　　　　　　　　　　　　　　　　　4.对于radio button来说，只有被用户勾选的才算是成功控件。

　　　　　　　　　　　　　　　　　　　　　　5.对于select来说，所有被选择的选项都作为成功控件，name由select控件提供。

　　　　　　　　　　　　　　　　　　　　　　6.对于file上传文件控件来说，如果它包含了选择文件，那么它将是一个成功控件。

　　　　　　　　　　　　　　此外，浏览器不会考虑Reset按钮以及OBJECT元素。

　　　　　　　　　　注意：对于CheckBox和radio button来说，它们被确认为成功控件，但没有控件指定value属性，那么在表单提交时，将会以“on”作为它们的value。

　　　　　　　　　　　　　如果在服务端读不到某个表单控件的值，请检查是否满足以上规则。

　　提交方式：：在前面的示例代码中，我为form指定了method="post"，这个提交方法就决定了浏览器在提交数据时，通过什么方式来传递它们。

　　如果是【post】，那么表单数据将放在请求体中被发送出去。

　　如果是【get】，那么表单数据将会追加到查询字符串中，以查询字符串的形式提交到服务端。

　　建议：表单通常还是以post方式提交比较好，这样可以不破坏URL，况且URL还有长度限制。

　　数据的编码：控件输入的内容并不是直接发送的， 而是经过一种编码规则来处理的。目前基本上只会只使用二种编码规则：application/x-www-form-urlencoded 和 multipart/form-data ，

　　　　　　　　这二个规则的使用场景简单地说就是：后者在上传文件时使用，其它情形则使用前者(默认)。（这个规则是在哪里指定的呢？ 其实form还有个enctype属性，用它就可以指定编码规则，当我在VS2008写代码时）

　　表单是如何处理数据的？可分为四个步骤：

　　　　1.识别所有的成功控件

　　　　2.为所有的成功控件创建一个数据集合，它们包含 control-name/current-value 这样的值对。

　　　　3.按照form.enctype指定的编码规则对前面准备好的数据进行编码。编码规则将放在请求中，用【Content-Type】指出。

　　　　4. 提交编码后的数据。此时会区分post,get二种情况，提交的地址由form.action属性指定的。

多提交按钮的表单

　　　　一个页面中包含多个服务端按钮

　　　　方法一：根据【成功控件】定义，我们设置按钮的name，在服务端用name来区分哪个按钮的提交

　　　　方法二：我将二个按钮的name设置为相同的值（根据前面的成功控件规则，只有被点击的按钮才会提交），在服务端判断value

MVC controller 中多个自定义类型传入参数

　　　　在服务端读取浏览器提交的数据时，都会使用控件的name属性，基本上在Asp.net中就这样处理。但在MVC中，MS为了简化读取表单数据的代码，

　　可以让我们直接在controller的方法中直接以传入参数的形式指定，此时框架会自动根据方法的参数名查找对应的输入数据（不只是表单数据）。

F5刷新问题不是webfroms的错

　　　　WebForms框架，WebForms的表单有F5的刷新重复提交问题，这个问题并不是WebForms本身的问题，是浏览器的问题。WebForms的传统用法是说：您的页面一直

　　使用服务器控件的提交方式，在事件处理后，页面又进入再一次的重现过程， 或者说：当前页面一直在使用POST方式向当前页面提交。

　　　　避开这个问题的方式一般有两种：1.PRG模式(Post-Redirect-Get)，在事件处理后，调用重定向的操作Response.Redirect()， 而不要在事件处理的后期再去给一些服务器控件绑定数据项了！

　　　　　　　　　　　　　　　　　　　建议：按钮事件只做一些提交数据的处理，将数据绑定的操作放在OnPreRender方法中处理，而不是写在每个事件中（遍地开花）。 不过，这种方式下，

　　　　　　　　　　　　　　　　　　　　　　可能伟大的ViewState就发挥不了太大的作用了，而后在Web.config中全局关掉后， 又发现很多服务器控件的高级事件又不能用了。

　　　　　　　　　　　　　　　　　　　2.以Ajax方式提交表单

　　　　　　　　　　　　以ajax方式提交表单：以Ajax方式提交表单的更大好处它是异步的，还可以实现局部刷新，这些特性都是浏览器提交方式没有的 ，提交表单时，浏览器需要4个步骤

　　　　　　　　　　　　　　　　　　　　　　只要调用ajaxForm()就行了。你也可以传入任何$.ajax()能接受的参数。

　　　　　　　　　　　　　　　　　　　　它的作用是：修改表单的提交方式，改成Ajax方式提交。最终当用户点击“提交”按钮时，此时不再是浏览器的提交行为了， 而是使用Ajax的方式提交，

　　　　　　　　　　　　　　　　　　　　　　　　　　提交的URL以及提交方法就是在FORM中指定的参数。

　　使用jQuery.form.js提交表单上传文件

　　　　方法：1.formserilize( )　　用于序列化表中的数据，并将其自动整理成适合AJAX异步请求的URL地址格式。

　　　　　　　2.dearForm（）　  清除表单中所有输入值的内容

　　　　　　　3.restForm（）　　重置表单中所有的字段内容，即将所有表单中的字段恢复到页面加载时的默认值。

　　ajaxForm（）和ajaxsubmit（）的区别？

　　　　ajaxFrom()会自动阻止表单提交。而ajaxSubmit()不会自动阻止表单提交，想要阻止表单提交，需要自己return false。

　　　　注意:ajaxForm()与ajaxsubmit()都可以没有参数或者接受1个参数。该参数既可以是一个回调函数，也可以是一个options对象。

　　　　　　　　var options={

 　　　　　　　　url:url, //form提交数据的地址

 　　　　　　　　type:type, //form提交的方式(method:post/get)

　　　　　　　　 target:target, //服务器返回的响应数据显示在元素(Id)号确定

　　　　　　　　 beforeSubmit:function(), //提交前执行的回调函数

 　　　　　　　　success:function(), //提交成功后执行的回调函数

 　　　　　　　　dataType:null, //服务器返回数据类型

 　　　　　　　　clearForm:true, //提交成功后是否清空表单中的字段值

　　　　　　　　 restForm:true, //提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态

 　　　　　　　　timeout:6000 //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)。

　　　　　　　　}