zoukankan      html  css  js  c++  java
  • 细说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 //设置请求时间,超过该时间后,自动退出请求,单位(毫秒)。
            }

      

  • 相关阅读:
    POI实现Excel导入数据库数据
    POI对Excel进行读取操作,工具类,便于操作数据
    HAProxy-1.8.20 根据后缀名转发到后端服务器
    Haproxy-1.8.20 编译安装:
    Soat控制HaProxy 动态增减服务器
    Haproxy-1.8.20 根据路径(URI)转发到后端不同集群
    Ansible User 模块添加单用户并ssh-key复制
    Ansible-playbook 安装redis
    二进制安装mysql-5.7.28
    编译安装 nginx -1.14.2
  • 原文地址:https://www.cnblogs.com/jacky912/p/10484497.html
Copyright © 2011-2022 走看看