使用artdialog模态对话框实现新增等功能

     
1.首先把整个artdialog的文件夹丢到项目中去
2.页面导入
<script type="text/javascript" src="<%=request.getContextPath()%>/thirdparts/dialog4/artDialog.js?skin=green"></script>
<script type="text/javascript" language="javascript" src="<%= request.getContextPath() %>/thirdparts/dialog4/plugins/iframeTools.js"></script>
其中skin=green 的green 代表风格,有blue black chrome 等
别忘了导入jquery
在这里举个例子吧:
首先写一个新增admin的界面
添加ajax提交的方法,此方式不支持文件上传
<script type="text/javascript">

function add(){
                    //jquery提供的一个方法,得到所有的参数,需要导入jquery
var postdata=$("#form1").serializeArray();

$.post('<%=request.getContextPath()%>/admin/add',postdata,function(data){
if(data=="yes"){
alert("新增成功");
//调用父窗口
var win = art.dialog.open.origin;
//调用父窗口刷新页面的方法
win.refreshData();
//关闭窗口
art.dialog.close();
}
},"text");
}
</script>

以上代码 在controller 中返回yes
*************************************************************************
然后是父窗口的界面  写的东西

<script type="text/javascript">
function refreshData(){
//刷新页面的方法有很多种
window.location=window.location;

};


//这个Addadmin()随便放在哪里的onclick事件上就可以了
function addAdmin(){
art.dialog.open('<%=request.getContextPath()%>/admin/add',{
width: '550px',
        height: '300px',
        title:'新增分类信息',
        锁定父界面
        lock:true,
        设置透明度
        opacity: 0.3,
        ok:function(iframeWin, topWin){
        // iframeWin: 对话框iframe内容的window对象
            // topWin: 对话框所在位置的window对象
       //调用添加的方法   
        iframeWin.add();//5
    
            //防止窗口关闭
            return false;
        },
        //添加取消按钮
        cancel: true
})
}

************************************************************************
继续在写支持文件上传的
这里写两种实现的方式:
做法1：使用html5提供的新特性：FormData,
缺点:部分浏览器如果不支持H5,不能实现

    var formdata = new FormData(document.getElementById("form1"));//可以上传文件

var url ="<%= request.getContextPath()%>/upload/demo1";
$.ajax({
url:url,
data:formdata, //name=zhangsan&age=50   {}
        contentType: false,//默认: "application/x-www-form-urlencoded"
        processData: false,//设置 processData 选项为 false，防止自动转换数据格式
type:"post",
dataType:"json",
success:function(data){
alert(data);
},
error:function(er){
alert(er.responseText);
}
});



******************************************************
做法2：使用jquery.form.js插件

        <script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

var url ="<%= request.getContextPath()%>/upload/demo2";

$("#form1").ajaxSubmit({ 
            type:'post', 
            url:url, 
            clearForm:true,//清空所有表单元素的值
            resetForm:true,//重置所有表单元素的值
            success:function(data){ 
                alert(data); 
            }, 
            error:function(XmlHttpRequest,textStatus,errorThrown){ 
                alert("上传失败了");
            } 
        });

***************************************************************
--奋斗的刘阿宝