Form 表单最佳实践
前言
这份文档献给我身边某些可爱的 Java 工程师,感谢你们激怒了我 :)
“Form 表单”其实是一种错误的叫法,Form 本身就是表单,不过这样叫似乎比较顺口。
这里所谓的“最佳实践”只是标题党。
POST & GET
表单有一般使用 POST 或 GET 方式提交数据到服务器端,如果你理解这两个词,这里就
不再赘述了;如果不理解,那也没什么好讲的,就以下面通俗的“所见即所得”理解吧。
GET:
所谓 GET 方式,通俗的讲,就是地址栏可见所有提交的信息:
<form action="http://example.com/get.htm" method="get">
<input type="text" name="key" value="value" />
<input type="submit" name="search" value="搜索" />
</form>
这个表单提交之后,地址栏就包含了所有的提交信息:
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 就是地址栏看不到提交请求所带的数据(又称为“参数”)。
<form action="http://example.com/post.html" method="post">
<input type="text" name="data" />
<input type="submit" value="提交">
</form>
这个表单提交之后,地址栏除了 http://example.com/post.html 外不包含其他信息。
广义上,通俗的讲,method="post" 的表单,AJAX post 都是 post 方式。
post 提交后,刷新仍是 post 提交相同的数据。
编码(Encoding)
在客户端页面和服务器端程序编码不同时,提交数据非常容易出现编码问题,即所谓的
“乱码”。
解决这个问题,可以多种方式:
-
最根本的,就是统一客户端和服务器端的编码。建议都使用 utf-8。
目前服务器上均是使用 utf-8 接受数据,所以可以考虑统一使用 utf-8 编码,
要做的有一下几点:
-
修改页面的 charset 设置
-
.vm 文件本身保存为 utf-8 编码。
-
修改编码设置:
milan-web-base-2.0-SNAPSHOT.jar\META-INF\webx\pipeline.xml
<valve class="com.alibaba.turbine.pipeline.SetLocaleValve"
defaultLocale="zh_CN" defaultCharset="UTF-8"/>
milan-web-base-2.0-SNAPSHOT.jar\META-INF\webx\webx-default.xml
<service name="VelocityService"
class="com.alibaba.service.velocity.DefaultVelocityService" earlyInit="true">
<property name="input.encoding" value="UTF-8"/>
<property name="parser.pool.size" value="100"/>
<property name="velocimacro.library" value="macros.vm"/>
</service>
-
设置 form 元素的 accept-charset 属性为服务器接收数据使用的编码。
Hack in IE: onsubmit="document.charset='utf-8';"
-
通过 JavaScript 的
encodeURIComponent(key) 函数转码,一般用于 AJAX 提交。
另有两个转码函数:escape() , encodeURI()
解码函数分别是:unescape() , decodeURI() , decodeURIComponent()
onsubmit
Form 表单的 onsubmit 事件在表单真正向服务器发送请求之前执行,一般用于验证表单
的数据完整性和合法性。如果处理函数返回 false,则不向服务器发送请求。
绑定 onsubmit 事件处理函数的方法有 3 种:
普通提交数据的表单
对于普通提交数据的表单,比如新增、修改数据,使用 POST 方式提交数据即可。
删除的方式一般有两种:
-
删除链接的 href 指向执行删除操作的地址,链接元素绑定 onclick 事件:
<a href="del.html?id=1" onclick="return window.confirm('确认删除?');">
这是 GET 提交方式。绑定事件处理函数的技巧同上面的 onsubmit。
-
绑定 onclick 事件,并执行 AJAX 提交, return false;回调函数中可以使用动态
更新 DOM 的方式或其他。
呃,其实最好体验也许是:删除操作时不要求确认(弹出确认对话框),但在事后可以
执行 撤销 删除操作。
多个提交按钮的表单
某些时候,单个表单中可能存在 2 个及其以上的提交按钮。
首先,考虑清楚这多个按钮是否真的都需要向服务器提交数据。像关闭,返回,后退,
或者失传已久的重置操作,就不要使用按钮了,至少不要使用绑定 onclick 并
form.action = "back.html";
form.submit()
或 location.href="back.html" 这样的按钮。
这些按钮在实践上使用链接来实现更好更简单:<a href="back.html">后退</a>
对于确实需要多个提交操作的按钮,可以通过提交按钮的 name 来区分。
<input type="submit" name="event_submit_do_publish" value="发布" />
<input type="submit" name="event_submit_do_draft" value="保存为草稿" />
多个相同操作的表单
类似于搜索引擎结果页,页面上、下均有功能相同的搜索框(为方便用户使用,虽然
实际受惠的用户可能并不多),这两个搜索框分别由两个表单组成,但是可以统一使用
同一个 onsubmit 事件处理函数。
<form onsubmit="return validater(this);">
<input type="text" name="k" />
<input type="submit" value="搜索" />
</form>
搜索结果列表...
<form onsubmit="return validater(this);">
<input type="text" name="k" />
<input type="submit" value="搜索" />
</form>
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 页之后的状态:
<form action="search.html" method="get">
<input type="text" name="k" value="key" />
<input type="submit" value="搜索" />
</form>
搜索结果列表...
<a href="search.html?k=key&p=1">上一页</a>
<a href="search.html?k=key&p=3">下一页</a>
<form action="search.html" method="get">
<input type="hidden" name="k" value="key" />
<input type="text" name="p" value="3" />
<input type="submit" value="翻页" />
</form>
可爱的陋习
不要在表单中为 button 类型的按钮绑定 onclick 事件,并在事件处理函数中执行
form.submit(); ,然后费尽心思实现“在输入框中也可以回车提交”这种蠢事。
也不要为了解决避免编码问题而在 onsubmit 处理函数中做
input.value=encodeURIComponent(input.value); ,然后为了避免这个带来的
“乱码(被编码的字符)瞬间出现在表单中”而把搜索框做成隐藏域,再附加一个傀儡
输入框用于输入。
|