Bootstrap

1.dialog组件的使用
    类似Bootstrap中的模态框

<div id="dd" style = "display:none"></div> 
$('#dd').dialog({    
    title: '新增图书',    
    width: 400,    
    height: 250,    
    closed: false,    
    cache: false,    
    href: xPath+'/editBook.jsp',//新增的表单页面    
    modal: true,
    buttons:[{
    text:'保存',
    handler:function(){
        //ajax方法传递数据到servlet中
        $.post("add路径",$("表单id").serialize(),function(data){
            if(data.success){
                $.messager.alert('我的消息','这是一个提示信息！');

            }
        });
    }
    },{
    text:'关闭',
    handler:function(){...}
    }]   
});    
 

2.$("表单id").serialize()
    jQuery中提供的一个方法，可以直接不需要手动获取输入框值，直接打包形成一个url参数拼接。

3.消息框的使用
    $.message.alert();

4.

    $('#dd').dialog({    
            title: '新增图书',    
            width: 400,    
            height: 260,    
            closed: false,    
            cache: false,    
            href: xPath+'/addBook.jsp',    
            modal: true ,
            buttons:[{
                text:'新增',
                handler:function(){
                    $.ajax({
                        url:xPath+"/addBook",
                        type:"post",
                        data:$('#bookForm').serialize(),//获取表单中的值
                        datatype:"text",
                        success:function(data){
                            let flag=data.message;
                            if(flag){
                                $.messager.alert('我的消息','新增成功！');
                                myload();//刷新界面，
                                $('#dd').dialog('close');//关闭界面
                            }
                        }
                    });
                }
            },{
                text:'关闭',
                handler:function(){
                    $('#dd').dialog('close');
                }
            }]
        });   

 以上代码弹出对话框窗口

url属性引入表单，代码如下

<div>
    <form id="bookForm">   
        <input type="hidden" name="bid" id="bid"/>
        <div style="margin: 15px;">   
            <label for="name">书名:</label>   
            <input id = "bookname" class="easyui-textbox" name="bname"  style="width:300px" data-options="required:true"> 
        </div>   
        <div style="margin: 15px;">   
            <label for="price">价格:</label>   
            <input class="easyui-textbox" name="bprice"  style="width:300px" data-options="required:true"> 
        </div>
        <div style="margin: 15px;">   
            <label for="booktype">类型:</label>   
            <input class="easyui-textbox" name="btype" style="width:300px" data-options="required:true"> 
        </div>  
    </form>
    </div>