改善Form提交数据的 UI 交互设计

改善Form提交数据的 UI 交互设计

让数据提交更友好

Form的数据提交需要改进的地方

1.数据一次校验
完整的数据校验需要前台页面（JS）和后台程序分别做校验，虽然有Commons-validate 框架可以使用，但本质上还是分为这么2次校验。 如果校验出错或者程序出错，都是后台采用redirect的方式返回到前台，虽然采用了struts之类框架的都是forward到前台，如果要是做复杂和耗时的校验（比如要进行数据库校验），页面会长时间停留在后台页面，不是很友好和方便。

2.验证信息友好化,让验证码”躲”起来
为了防止机器提交，都会采用验证码机制，对于正常操作的用户，每次都要输入验证码,显然不够不友好的，如果提交的时候能够做判断，如果是正常提交就不需要验证码，如果是被认定为机器提交，诸如连续提交等行为，则提示需要输入验证码才能提交数据，这样显然就进了一步。

3.提交过程友好显示，拒绝滥用alert界面
通过为了简单，在返回任何数据的时候，都用alert提示给用户，alert最大的问题在于需要点击一下才能关闭，如果提交成功能自动关闭是不是比这种alert要好很多？

采用AJAX +JSON 方式提交数据 与传统提交数据 的比较

/* 表单提交 2.0 update 2008-06-14  */

var ajaxSubmitFormData = {

form:false,  //用来保存正在提交的表单

debug:false,

callback:false,

dataType:"json",

onSubmit:function(data){

//正在提交数据提示

},

onResponse:function(response){

//当数据返回时触

},

onResponse200:function(data){

alert('恭喜你，数据提交成功');

window.location.reload(false);

},

onResponse403:function(data){

//输入验证码界面

var formId=ajaxSubmitFormData.form;

if (!$(formId).find(":input[name='verfiyCode']").length){

$(formId).append('<input type="text" name="verfiyCode" size="4" /><img src="verifyCode.jsp">');

}

},

onResponse500:function(data){

var s="提交错误:/n";

//alert(data.length);

for(var i=0;i<data.length;i++){

s=s+data[i].id+"|"+data[i].message+"/n";

}

alert(s);

},

onResponse302:function(data){

if (data.length>0){

window.location=data[0].message;

}else{

alert("未定义跳转地址");

}

}

};

$(document).ready(function(){

$('form.ajaxForm').submit(function() {

//alert($(this).attr("id"));

var formId=$(this).attr("id");

submitAjaxFormNow("#"+formId);

return false; // <-- important!

});

$(".ajaxSubmitButton").click(function(){

var formId=$(this).attr("formId");

//alert($(this).attr("formId"));

submitAjaxFormNow("#"+formId);

});

});

function initSubmitAjax(formId,returnFunc){

var options= {

beforeSubmit:  function(formData, jqForm, options) {

if (ajaxSubmitFormData.debug){

var queryString = $.param(formData);

alert('正在提交的数据:/n' + queryString);

}

if ($.isFunction(ajaxSubmitFormData.onSubmit)) {

ajaxSubmitFormData.onSubmit(formData);

}

return true;

},

success:function (responseText, statusText)  {

try{

if (ajaxSubmitFormData.debug){

alert('status: ' + statusText + '/nresponseText:/n' + responseText);

}

if ($.isFunction(ajaxSubmitFormData.onResponse)) {

ajaxSubmitFormData.onResponse(responseText);

}

ajaxSubmitFormData.form     =false;

ajaxSubmitFormData.callback =false;

//-------- TODO 改成触发事件方式

responseText=responseText.replace(//r/n/g,"");

//trim space

responseText=responseText.replace(/^/s*|/s*$/g, "");

var response = eval(responseText)[0]; //转换成json格式

if (response.code == "200" ){

if ($.isFunction(returnFunc)) {

ajaxSubmitFormData.callback=returnFunc;

returnFunc(response.messages);

}else{

if ($.isFunction(ajaxSubmitFormData.onResponse200)) {

ajaxSubmitFormData.onResponse200(response.messages);

}

}

//$(formId).triggerHandler("ajax_response_200",response.messages);

}

if (response.code == "403" ){

//保存当前

ajaxSubmitFormData.form       = formId;

ajaxSubmitFormData.callback   = returnFunc;

if ($.isFunction(ajaxSubmitFormData.onResponse403)) {

ajaxSubmitFormData.onResponse403(response.messages);

}

//$(formId).triggerHandler("ajax_response_403",response.messages);

}

if (response.code == "302" ){

if ($.isFunction(ajaxSubmitFormData.onResponse302)) {

ajaxSubmitFormData.onResponse302(response.messages);

}

//$(formId).triggerHandler("ajax_response_302",response.messages);

}

if (response.code == "500" ){

if ($.isFunction(ajaxSubmitFormData.onResponse500)) {

ajaxSubmitFormData.onResponse500(response.messages);

}

//$(formId).triggerHandler("ajax_response_500",response.messages);

}

}catch(e){

alert("服务器返回的数据格式无效:/n"+responseText+"/nError:"+e.message);

}

},

clearForm:true,

resetForm:true,

timeout:60000,

type:"POST"

};

$(formId).ajaxError(function(event, request, settings){

alert("处理请求发生错误:/n"+settings.url+"/n请重新刷新页面或稍后再试");

$.unblockUI();

});

return options;

}

function submitAjaxFormNow(formId,returnFunc){

if ($(formId))

$(formId).ajaxSubmit(initSubmitAjax(formId,returnFunc));

}

function submitAjaxForm(formId,returnFunc){

if ($(formId))

$(formId).ajaxSubmit(initSubmitAjax(formId,returnFunc));

}

预览







演示和源码下载