V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
tanteng
V2EX  ›  PHP

ajax 提交表单的好处有哪些

  •  
  •   tanteng · 2015-04-05 18:59:21 +08:00 · 6998 次点击
    这是一个创建于 3528 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我们公司电商网站,有一个卖家报名表单,这个表单大量使用js,用户可以给商品添加sku,即各种扩展信息,输入淘宝地址也是ajax检测店铺地址是不是卖家等等,提交和编辑表单都是用ajax的post方式,并且提交或者编辑成功都会跳转到另一个页面,我想问的是,既然还是会跳转到一个页面,为什么非要用ajax方式,form action的方式一样可以实现啊。

    所以这种情况下用ajax提交表单的好处是什么。

    21 条回复    2015-04-07 00:14:30 +08:00
    kslr
        1
    kslr  
       2015-04-05 19:02:33 +08:00   ❤️ 1
    如果错误会怎么样? 如果还是跳转,那也许是喜欢用吧
    Troevil
        2
    Troevil  
       2015-04-05 19:15:55 +08:00
    看写这个的程序员的想法吧. 我也都用ajax,我是因为ajax可以不用考虑form的范围,就是取参的自由等
    moult
        3
    moult  
       2015-04-05 19:27:02 +08:00
    Ajax的初衷应该是用户体验吧,省去了页面跳转刷新,加载也快点。。
    justfindu
        4
    justfindu  
       2015-04-05 19:28:13 +08:00
    提交编辑成功是为了防止二次提交吧 而且告诉你特么编辑成功啦 ... 其他体验检查什么 ajax也不错吧
    lilydjwg
        5
    lilydjwg  
       2015-04-05 19:42:10 +08:00
    @Troevil 如果是登录表单的话,没有 form 会导致浏览器无法识别出这是一个登录表单(表单域没有 name 属性也不行),很可能不能记住用户名和密码,比如 Discuz 论坛就是这样子。以前我为这类网站使用专门的文件记录自己的用户名和密码来着。现在一般直接邮件找回,然后再设置个随机密码。

    用 form 而非 Ajax 到处取东西的(对用户的)另一个好处是方便写脚本来提交请求 :-)
    lyragosa
        6
    lyragosa  
       2015-04-05 20:01:49 +08:00
    ajax本身也是个网页……所以不影响脚本的。

    顶多是稍微麻烦一点,要看看console
    kn007
        7
    kn007  
       2015-04-05 20:16:12 +08:00
    感觉ajax能防大部分机器人。貌似跑题了。。。
    lilydjwg
        8
    lilydjwg  
       2015-04-05 21:09:23 +08:00
    @kn007 还能防住写爬虫的新手~
    tanteng
        9
    tanteng  
    OP
       2015-04-05 21:28:07 +08:00
    @kslr 验证表单肯定还是用js啊,当然php处理页面也会判断
    jimmy66
        10
    jimmy66  
       2015-04-05 21:29:52 +08:00
    直观感觉上快吧
    tanteng
        11
    tanteng  
    OP
       2015-04-05 21:31:27 +08:00
    @moult 我说了啊,提交表单不管成功还是失败还是会跳转到一个页面
    tanteng
        12
    tanteng  
    OP
       2015-04-05 21:32:14 +08:00
    @jimmy66 用ajax提交还是得用一个方法来处理这些数据啊,实际上还多了一个过程,怎么会更快
    lincanbin
        13
    lincanbin  
       2015-04-05 22:37:53 +08:00
    一些高校的校园网网络服务质量很低,如果像v2ex这样直接post,网络错误,跳到浏览器默认的网络错误页面,你再后退,写的东西马上就没了。
    为此我就特地把自己论坛(http://www.94cb.com/ )的程序也改成了Ajax提交,网络错误的时候弹个窗,而且这样也方便再次尝试提交。

    https://github.com/lincanbin/Carbon-Forum/blob/master/static/js/reply.function.js#L121
    lilydjwg
        14
    lilydjwg  
       2015-04-05 22:53:43 +08:00   ❤️ 2
    @lincanbin 不对的。如果 POST 失败,按 F5 可以重新发送请求。如果点了后退,只要页面不是通过复杂的 Ajax 等技术生成的(像 InoReader 那种),那么(默认)除密码外所有的用户输入内容是会保持原样的。当然你显式指定不保留的字段(具体方法忘了)是会被清除的。

    如果使用 Ajax 提交的话,通常为了防止用户重复提交,会在提交过程中禁用提交按钮。有些程序,如 Fluxbb,忘记在出错的时候重新启用之,反而造成无法重新提交的情况。还有 Duolingo,如果提交因为网络状况的原因卡住了,一个请求可能等几十分钟也完成不了又不超时,一刷新页面这节的记录会丢失,所以我只好拿开发者工具去启用那个提交按钮然后才能重新提交。

    还有哦,使用 Ajax 提交的时候,我从来没见到有人去更改网站图标或者标题,来表示提交正在进行中。而原生 HTML 表单提交时,浏览器会转圈告诉用户这个标签页还在加载。这样,当用户网络不太好的时候,用户可以切换到其它标签页做其它的事情而不是盯着一个无趣的页面等待,在提交成功(或者失败)的时候再过来继续。

    总结:传统的 HTML 可能不够漂亮不够炫酷,但是很多细节是做过充分的考虑的。使用一种更「现代」的方式去取代的时候,一定要考虑到各种情况,不然体验反而不如原生的好。
    lilydjwg
        15
    lilydjwg  
       2015-04-05 22:55:31 +08:00
    刚刚提交到 v2ex 的请求失败了呢,不过浏览器还是显示包含提交内容的页面,没有显示错误页面。「回复」按钮依旧可用,所以很容易地重新提交了 :-)
    jimmy66
        16
    jimmy66  
       2015-04-05 23:20:15 +08:00
    @tanteng 我都说了是直观感受了,人的感觉又不一定就是按照数据来的,我想你或许没有体会过在高配置的AJAX博客站点提交评论的感受,不用AJAX怎么样都会刷新一下再展现页面,AJAX的话,完全不用等待这个刷新的感觉,就算时间慢一些,感觉上也快了不少,毕竟不用鼠标再滑动下来
    kimecho
        17
    kimecho  
       2015-04-06 00:08:21 +08:00
    可以不刷新页面,对于手机使用流量的人来说可以省很多流量。
    不过我个人觉得要根据实际情况吧,有需要才跳转,我会选择尽量不跳转。
    lincanbin
        18
    lincanbin  
       2015-04-06 01:28:24 +08:00 via Android
    @lilydjwg 国内几款浏览器的网络错误页是劫持到另一个网页的,你可以试试还在不在。
    jianghu52
        19
    jianghu52  
       2015-04-06 11:31:59 +08:00
    我觉得ajax在处理错误的时候能舒服一点,因为页面没动的情况下就报错。
    futursolo
        20
    futursolo  
       2015-04-06 13:37:28 +08:00
    可以防止提交失败的时候失去已经写好的数据。
    ming2281
        21
    ming2281  
       2015-04-07 00:14:30 +08:00
    异步性
    HTTP是无状态的,每一次请求/响应都是独立的,
    Ajax可以异步加载一些请求但是不让页面刷新. =>节省了服务端的资源
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1037 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 23:06 · PVG 07:06 · LAX 15:06 · JFK 18:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.