• 浅谈表单同步提交和异步提交


    (1)分析

      从特性上将,表单具有默认的提交行为,默认是同步的,即同步表单提交,浏览器会锁死(转圈... ...),等待服务端的响应结果。接下来做下对比分析

    (2)异步提交,首先看下案例里的异步提交

      

    异步表单提交:form标签内部不再编写action和method,而是通过ajax的url和method选项去实现提交

    (3)同步提交

      

        同步提交时不再需要ajax,而是直接在form表单的开始标签里添加action和method属性实现,接下来开始进行注册

      

         点击提交按钮

        

        再次刷新页面,内容如下

        

    同步表单提交,浏览器会直接将服务端响应内容,直接渲染到客户端浏览器所谓的(页面容器中)

        接下来做下修改,服务端返回HTML字符串内容,如下所示

        

         此时再次刷新页面,结果如下

        

         此时呈现的内容不应该称之为页面,而是容器。浏览器将服务端返回的html字符解析渲染到了所谓的页面容器里。因此,同步请求返回结果,浏览器都会进行显示覆盖

        接着将html字符串改为数字,测试如下

        

        

    总结如下:同步提交,浏览器会将响应结果直接进行覆盖,之前的表单便会被覆盖,替换成服务端返回内容

        

      所以AJAX出现之前,都是这么同步操作表单提交的

       

       

       直到后来一个不懂编程的设计交互师提出来该交互效果体验差,才有所改变

      

    (4)其他处理办法

      在AJAX诞生之前,有人想到办法解决了上述这种问题。之前的问题是“提示和交互不在同一个页面”,那么这种新办法便是直接再次重定向到该页面,这样便不用离开当前页面,体验更为合理一点。

    该方法优点:1、不用离开当前页面;2、保留用户之前输入的内容

      1、服务端重定向

        

         此时的结果便是提交重复信息时刷新页面

      2、展示报错信息

        

         

         此时重复提交内容时,表单同步提交,页面刷新且出现报错信息

        

    分析:之所以可以直接在html模板页面编写{{error_message}},因为第一次到注册页时是get请求,没有error_meaage内容,所以不会展示。如下所示

        

        

      3、同类对比

        直到现在,任然有很多网站用这种同步表单操作,刷新页面,展示错误信息。例如GitHub,如下所示:点击时会同步提交表单内容,刷新页面,刷新完毕后,将错误内容展示到新页面

        

    注意:这里没有异步请求,所有的操作都是通过服务端返回的。

      4、使用缘由

        现在已经有了AJAX,但很多网站任然使用这种方式,原因:服务端处理起来更加安全一些,虽然会给服务器带来一些压力,但鉴于安全性,大企业择优选取方案。

        当前还有其他原因,例如保证交互的一致性,有的可能不支持ajax,用这种方式会使用户体验更加统一,避免很多麻烦。

      5、保留用户 初始输入内容

        

    注意:第一次加载注册页时,没有form_data数据,所以如果直接在html模板页使用form_data.email和form_data.nickname无法直接获取,还会报错。
    因为此时的form_data为undefined,所以无法使用对象操作符获取对应属性

            

        密码位置一般会在刷新后清空,测试如下

        

        

    (5)方法对比

      上述服务器同步操作方法在于更加安全,用户体验更统一。

      但服务端无法直接操作DOM,所以也不可能在客户端页面追加文本或其他内容,所以无法做出漂亮的用户体验特效... ...

      

       这种方式操作稍微有些繁琐。

      现在倡导降低前后端耦合,避免服务端处理客户端内容。直到后来AJAX的诞生,可以在客户端结合后台响应操作DOM,同时实现一些绚丽的特效,使得交互更加丰富。

     

    (6)其他框架

      1、在很多框架例如Ruby(日本人)编写发明,很好实现了分离开发

      2、国内之前有过“易语言”,使用中文编写代码... ...(中文偏向抒情、英文更具逻辑)

      

       3、现在比较火的Vue,实现了前后端分离开发,甚至连路由控制都由前端操作,服务端只需操作数据。即数据和页面完全分离,前后端只通过接口进行交互。完全有客户端控制页面。

    (6)小结

      同步提交表单内容会导致浏览器锁死,页面刷新,异步提交表单内容不会发生锁死,浏览器任然可以干别的事情。

       

      异步交互没有刷新页面,实现页面局部更新

    同步提交表单数据:主要依靠服务端进行处理
    异步提交:服务端只需要返回交互的业务信息,具体由客户端进行交互效果的编写

    .

  • 相关阅读:
    每日英语:AntiJapan Protests Flare in China
    opencv CvMat矩阵学习
    warning C4018有符号无符号不匹配
    每日英语:Relationship Repair: 10 Tips for Thinking Like a Therapist
    结构体数组定义和引用
    每日英语:China's Conflicted Consumers
    一个托盘程序, 简化notifyicon的使用.
    nunit notes from TDD in .net
    一款能拖拉的winform树形控件
    vss 2005 internet visit
  • 原文地址:https://www.cnblogs.com/fightjianxian/p/12294713.html
Copyright © 2020-2023  润新知