数据库

位置:IT落伍者 >> 数据库 >> 浏览文章

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


发布日期:2020年11月25日
 
改善Form提交数据的UI 交互设计

数据一次校验

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

验证信息友好化让验证码起来

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

提交过程友好显示拒绝滥用alert界面

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

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

/* 表单提交 update */

var ajaxSubmitFormData = {

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

debug:false

callback:false

dataType:json

onSubmit:function(data){

//正在提交数据提示

}

onResponse:function(response){

//当数据返回时触

}

onResponse:function(data){

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

windowlocationreload(false);

}

onResponse:function(data){

//输入验证码界面

var formId=ajaxSubmitFormDataform;

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

$(formId)append(<input type=text name=verfiyCode size= /><img src=verifyCodejsp>);

}

}

onResponse:function(data){

var s=提交错误:\n;

//alert(datalength);

for(var i=;i<datalength;i++){

s=s+data[i]id+|+data[ssage+\n;

}

alert(s);

}

onResponse:function(data){

if (datalength>){

windowlocation=data[ssage;

}else{

alert(未定义跳转地址);

}

}

};

$(document)ready(function(){

$(formajaxForm)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(formIdreturnFunc){

var options= {

beforeSubmit: function(formData jqForm options) {

if (ajaxSubmitFormDatadebug){

var queryString = $param(formData);

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

}

if ($isFunction(ajaxSubmitFormDataonSubmit)) {

ajaxSubmitFormDataonSubmit(formData);

}

return true;

}

success:function (responseText statusText) {

try{

if (ajaxSubmitFormDatadebug){

alert(status: + statusText + \nresponseText:\n + responseText);

}

if ($isFunction(ajaxSubmitFormDataonResponse)) {

ajaxSubmitFormDataonResponse(responseText);

}

ajaxSubmitFormDataform =false;

ajaxSubmitFormDatacallback =false;

// TODO 改成触发事件方式

responseText=responseTextreplace(/\r\n/g);

//trim space

responseText=responseTextreplace(/^\s*|\s*$/g );

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

if (de == ){

if ($isFunction(returnFunc)) {

ajaxSubmitFormDatacallback=returnFunc;

returnFunc(ssages);

}else{

if ($isFunction(ajaxSubmitFormDataonResponse)) {

ajaxSubmitFormDataonResponse(ssages);

}

}

//$(formId)triggerHandler(ajax_response_ssages);

}

if (de == ){

//保存当前

ajaxSubmitFormDataform = formId;

ajaxSubmitFormDatacallback = returnFunc;

if ($isFunction(ajaxSubmitFormDataonResponse)) {

ajaxSubmitFormDataonResponse(ssages);

}

//$(formId)triggerHandler(ajax_response_ssages);

}

if (de == ){

if ($isFunction(ajaxSubmitFormDataonResponse)) {

ajaxSubmitFormDataonResponse(ssages);

}

//$(formId)triggerHandler(ajax_response_ssages);

}

if (de == ){

if ($isFunction(ajaxSubmitFormDataonResponse)) {

ajaxSubmitFormDataonResponse(ssages);

}

//$(formId)triggerHandler(ajax_response_ssages);

}

}catch(e){

alert(服务器返回的数据格式无效:\n+responseText+\nError:+ssage);

}

}

clearForm:true

resetForm:true

timeout:

type:POST

};

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

alert(处理请求发生错误:\n+settingsurl+\n请重新刷新页面或稍后再试);

$unblockUI();

});

return options;

}

function submitAjaxFormNow(formIdreturnFunc){

if ($(formId))

$(formId)ajaxSubmit(initSubmitAjax(formIdreturnFunc));

}

function submitAjaxForm(formIdreturnFunc){

if ($(formId))

$(formId)ajaxSubmit(initSubmitAjax(formIdreturnFunc));

}

预览

  

               

上一篇:JAVA访问ACCESS数据库的方法

下一篇:Data Access Application Block 概述