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

简单登陆

使用控件Form提交表单

源码下载:EasyUI_03.zip

步骤:

1. 查看API Form

    <form id="ff" method="post">
        ...
    </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 提交表单