Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1346085
  • 博文数量: 306
  • 博客积分: 3133
  • 博客等级: 中校
  • 技术积分: 3932
  • 用 户 组: 普通用户
  • 注册时间: 2009-04-19 16:50
文章分类

全部博文(306)

文章存档

2018年(7)

2017年(18)

2016年(39)

2015年(35)

2014年(52)

2013年(39)

2012年(22)

2011年(29)

2010年(53)

2009年(12)

分类: 系统运维

2011-05-26 14:56:03

Form 表单最佳实践

前言

这份文档献给我身边某些可爱的 Java 工程师,感谢你们激怒了我 :)

“Form 表单”其实是一种错误的叫法,Form 本身就是表单,不过这样叫似乎比较顺口。

这里所谓的“最佳实践”只是标题党。

POST & GET

表单有一般使用 POST 或 GET 方式提交数据到服务器端,如果你理解这两个词,这里就 不再赘述了;如果不理解,那也没什么好讲的,就以下面通俗的“所见即所得”理解吧。

GET:

所谓 GET 方式,通俗的讲,就是地址栏可见所有提交的信息:

这个表单提交之后,地址栏就包含了所有的提交信息: http://example.com/get.html?key=value&search=%CB%D1%CB%F7

可以直接在地址栏修改: action: 即 http://example.com/get.html 部分。 data/param: 即 key=value&search=%CB%D1%CB%F7 这些参数部分。

广义上,通俗的讲,包括地址栏上手写并回车,点击链接,或者 method="get" 的表单, 以及通过 AJAX get 提交的都是 get 方式。get 请求,刷新时还是 get 请求。

POST:

通俗的讲,POST 就是地址栏看不到提交请求所带的数据(又称为“参数”)。

这个表单提交之后,地址栏除了 http://example.com/post.html 外不包含其他信息。

广义上,通俗的讲,method="post" 的表单,AJAX post 都是 post 方式。 post 提交后,刷新仍是 post 提交相同的数据。

编码(Encoding)

在客户端页面和服务器端程序编码不同时,提交数据非常容易出现编码问题,即所谓的 “乱码”。

解决这个问题,可以多种方式:

  1. 最根本的,就是统一客户端和服务器端的编码。建议都使用 utf-8。
    目前服务器上均是使用 utf-8 接受数据,所以可以考虑统一使用 utf-8 编码, 要做的有一下几点:
    • 修改页面的 charset 设置
    • .vm 文件本身保存为 utf-8 编码。
    • 修改编码设置: milan-web-base-2.0-SNAPSHOT.jar\META-INF\webx\pipeline.xml
      
      
      milan-web-base-2.0-SNAPSHOT.jar\META-INF\webx\webx-default.xml
      
      
          
          
          
      
      
  2. 设置 form 元素的 accept-charset 属性为服务器接收数据使用的编码。
    Hack in IE: onsubmit="document.charset='utf-8';"
  3. 通过 JavaScript 的 encodeURIComponent(key) 函数转码,一般用于 AJAX 提交。
    另有两个转码函数:escape(), encodeURI()
    解码函数分别是:unescape(), decodeURI(), decodeURIComponent()

onsubmit

Form 表单的 onsubmit 事件在表单真正向服务器发送请求之前执行,一般用于验证表单 的数据完整性和合法性。如果处理函数返回 false,则不向服务器发送请求。

绑定 onsubmit 事件处理函数的方法有 3 种:

  • 一般简单的页面,直接在 form 标签中添加 onsubmit 属性:
    ...
  • 按照“内容与行为分离”的思想,我们一般可以在 JavaScript 加载完成后对表单进行 事件绑定:
    //var form = document.getElementById("formId");
    form.onsubmit = function(){
        if(ie){document.charset="utf-8";}
        return !!this["k"].value;
    };
    
  • 更专业的事件绑定方法(考虑到兼容性问题,这里使用 jQuery 代码):
    $("#formId").submit(function(){
        return this.k.value;
    });
    

普通提交数据的表单

对于普通提交数据的表单,比如新增、修改数据,使用 POST 方式提交数据即可。 删除的方式一般有两种:

  1. 删除链接的 href 指向执行删除操作的地址,链接元素绑定 onclick 事件:
    这是 GET 提交方式。绑定事件处理函数的技巧同上面的 onsubmit。
  2. 绑定 onclick 事件,并执行 AJAX 提交, return false;回调函数中可以使用动态 更新 DOM 的方式或其他。

呃,其实最好体验也许是:删除操作时不要求确认(弹出确认对话框),但在事后可以 执行 撤销 删除操作。

多个提交按钮的表单

某些时候,单个表单中可能存在 2 个及其以上的提交按钮。

首先,考虑清楚这多个按钮是否真的都需要向服务器提交数据。像关闭,返回,后退, 或者失传已久的重置操作,就不要使用按钮了,至少不要使用绑定 onclick 并

form.action = "back.html";
form.submit()

location.href="back.html" 这样的按钮。

这些按钮在实践上使用链接来实现更好更简单:后退

对于确实需要多个提交操作的按钮,可以通过提交按钮的 name 来区分。



多个相同操作的表单

类似于搜索引擎结果页,页面上、下均有功能相同的搜索框(为方便用户使用,虽然 实际受惠的用户可能并不多),这两个搜索框分别由两个表单组成,但是可以统一使用 同一个 onsubmit 事件处理函数。

搜索结果列表...
function validater(form){
    return form["k"].value;
}

搜索

搜索建议使用 GET 方式提交,过滤参数和当前页码这些信息全部带在地址中。 http://example.com/search.html?k=keywrod

翻页链接(上一页,下一页...) http://example.com/search.html?k=keywrod&p=2

翻页系统一般还允许用户手动输入页码并直接跳转到指定页,这个翻页表单建议和 搜索表单分离,分别是不同的 form 组成。

下面是搜索关键字 key 并翻页到第 2 页之后的状态:

搜索结果列表... 上一页 下一页

可爱的陋习

不要在表单中为 button 类型的按钮绑定 onclick 事件,并在事件处理函数中执行 form.submit(); ,然后费尽心思实现“在输入框中也可以回车提交”这种蠢事。

也不要为了解决避免编码问题而在 onsubmit 处理函数中做 input.value=encodeURIComponent(input.value);,然后为了避免这个带来的 “乱码(被编码的字符)瞬间出现在表单中”而把搜索框做成隐藏域,再附加一个傀儡 输入框用于输入。

阅读(2472) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~