【easyUI】02利用form表单制作一个用户登入界面包含ajax存取数据等等

首先要导入的数据是如下的css和js文件：

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/icon.css">   
<script type="text/javascript" src="jquery-easyui-1.3.5/jquery-2.1.1.js"></script>   
<script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script> 

这里在js中编写easyUI的一些方法：推荐加黄背景的变量先定义一下，在后面就不用再去body中取出该login..的值了

var loginAndRegDialog;
$(function(){
    loginAndRegDialog=$('#loginAndRegDialog').dialog({
        closable:false,
        modal:true,
        buttons:[{                  //代表一个数组button是一个json形式的
            text:'注册',
            handler:function(){      //handler是回调一个事件
                
            }
        },{
            text:'登入',
            handler:function(){      //handler是回调一个事件
                $.ajax({ 
                    url:sy.bp()+'/userController.do?login',   //sy.bp()获得项目的根目录
                    data:{
                        name:$('#loginInputForm input[name=name]').val(),
                        password:$('#loginInputForm input[name=password]').val()},
                    //换一种方式：data:$('#loginInputForm').serialize(),这里是把获取的用户名变成字符串的形式传给后台中间用&进行结合了
                    
                    dataType:'json',
                    success:function(r){
                        if(r&&r.success){
                            loginAndRegDialog.dialog('close');  //把登入框关闭显示登入成功了。把遮罩层关掉了
                            $.message.show({
                                title:'提示',
                                msg:r.msg
                            });
                        }else{$.messager.alert('标题',r.msg);}
                    }
                    
                });
            }
        }]
    });
});

在html中写如下的form表单显示

<div id="loginAndRegDialog" title="用户登入" style="width: 250px;height: 200px;">
<form action="" id="loginInputForm" method="post">
<table>
<tr>
   <th>用户名：</th>
   <td><input name="name"/></td>
</tr>
<tr><th>密码：</th><td><input name="password" type="password"></td></tr>
</table>
</form>
</div>