05-EasyUI_登陆的实现2-Form控件的使用

淡淡的烟草味﹌ 2022-09-18 01:51 145阅读 0赞

简单登陆  
  
使用控件Form提交表单

源码下载:[EasyUI\_03.zip][EasyUI_03.zip]

# 步骤: #

## 1. 查看API Form ##

###  1.1 Ajax提交(无刷新)  ###

To make the form become ajax submit form

$('#ff').form({
            url:...,
            onSubmit: function(){
                // do some check
                // return false to prevent submit;
            },
            success:function(data){
                alert(data)
            }
        });
        // submit the form
        $('#ff').submit();

###  1.2 submit提交(form提交)  ###

使用 iframe提交, 也是无刷新效果(其实刷新的是iframe),支持文件上传  
缺点: 控制台监控不到  
  
To do a submit action

// call 'submit' method of form plugin to submit the form
        $('#ff').form('submit', {
            url:...,
            onSubmit: function(){
                // do some check
                // return false to prevent submit;
            },
            success:function(data){
                alert(data)
            }
        });

###  1.3 Form组件的 属性-事件-方法 ###

1) properties  
url : string; The form action URL to submit  
  
2) events  
① onSubmit : 参数param; 提交前触发, 返回false可以取消提交动作  
② success : 参数data; 成功提交后触发, data可接收服务器端数据,data为字符串  
  
3) methods  
① submit : 参数options(对象); 提交.\{url:..,onSubmit:..,success:..\}  
② load : 参数data; Load records to fill the form.  
③ clear  
④ reset  
⑤ validate: 配合 validatebox plugin使用

## 2. 渲染 form  ##

// 渲染Form 
    		loginInputForm = $("#loginInputForm").form({
    		    url:"userLoginServlet",
    		    success:function(data){
    		    	console.info(data);
    		    	
    		    	// 注意 data为json格式的字符串,需要转换
    		    	data = $.parseJSON(data);
    
    		    	console.info(data);
    		    	
    		    	if (data && data.success) {	// 成功, 隐藏dialog
    					loginAndRegDialog.dialog('close');
    					$.messager.show({
    						title : "提示",
    						msg : data.msg,
    						timeout:2000,
    					});
    				} else { // 失败, 弹 对话框
    					$.messager.alert('标题',data.msg);
    				}
    		    }			
    		});

## 3. 提交 form ##

// 将div渲染程dialog
    		loginAndRegDialog.dialog({
    			closable : false,
    			modal : true,
    			buttons : [ {
    				text : '注册',
    				handler : function() {
    				}
    			}, {
    				text : '登陆',
    				handler : function() {
    					// 提交Form
    					loginInputForm.submit();
    				}
    			} ]
    		});

在点击"登录"按钮时调用 Form组件的 submit()方法  
注意:  
success(data)\{\} data需要转为json对象  
使用 eval("("+data+")")或者$.parseJSON(data)

# 技巧: #

## 1. $.parseJSON()的使用 ##

$.parseJSON( '\{"键":值\}' );

## 2. 无刷新表单提交 ##

原理: 使用 隐藏的 iframe 提交表单

[EasyUI_03.zip]: http://download.csdn.net/detail/wuqinfei_cs/6484487