一.对话框：Dialog 加载页面

<div id="myDialog" style="display:none"></div>

二.editGoods.jsp 表单 myForm

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

</head>
<body>
   <form id="myForm" method="post" style="text-align: center;margin: 20px">
    
    <input type="hidden" name="gid">
<div>
<label for="name">商品名称</label>
<input class="easyui-textbox" style="width:200px" type="text" name="gname" data-options="required:true" />
</div><br>
<div>
<label for="name">商品价格</label>
<input class="easyui-textbox" style="width:200px" type="text" name="gprice" data-options="required:true" />
</div> <br>
<div>
<label for="name">商品销量</label>
<input class="easyui-textbox" style="width:200px" type="text" name="gxl" data-options="required:true" />
</div> <br>
<div>
<label for="name">商品库存</label>
<input class="easyui-textbox" style="width:200px" type="text" name="gkc" data-options="required:true" />
</div><br>

<div>
<label for="name">商品图片</label>
<input class="easyui-textbox" style="width:200px" type="text" name="gpath" data-options="required:true" />
</div> <br>
<div>
<label for="name">商品简介</label>
<input class="easyui-textbox" style="width:200px;height: 60px" type="text" name="ginfo" data-options="required:true" />
</div> <br>
<div>
<label for="name">商品分类</label>
<input class="easyui-textbox" style="width:200px" type="text" name="tid" data-options="required:true" />
</div><br>
</form>
</body>
</html>

三.提交向后台发起ajax请求

//给增加按钮添加点击事件
       $("#addBtn").click(function(){
           openDialog();

       })


   //打开对话框的方法
   function open(row){
       var title='增加类别';
       var url="/addtype.do";
       if(row!=undefined){//是修改
           title='修改类别';
       url="/updatetype.do";
       }
       //新建对话框
       $('#myDialog').dialog({
           title: title,//标题
           width: 400, //宽
           height: 300, //高
           closed: false,//是否可以关闭可以
           cache: false, //是否有缓存
           href:'admin/addType.jsp', //加载的页面
           modal: true, //是否有模态效果
           onLoad:function(){
               if(row!=undefined){//是修改
                   //直接给表单填充数据
                   $('#myForm').form('load',row);   //row 对象可以说字符串或者对象
               }
           },
           buttons:[{//对话框的按钮
                   text:'提交',
                   handler:function(){
                       //向后台发起Ajax请求
                       $.ajax({
                           url:ctx+url,//请求路径
                           data:$("#myForm").serialize(),//将表单内容进行序列化方便Ajax提交数据
                           type:"post",//提交方式
                           dataType:"text",//预期服务器可能返回的数据类型
                           success:function(data){//成功的回调函数
                               if(data=="yes"){//成功
                                   $.messager.alert('消息','提交成功');
                                   //关闭对话框
                                   $('#myDialog').dialog("close");
                                   myShow();//刷新数据
                               }
                               else{//失败
                                   $.messager.alert('警告','提交失败');
                               }
                           },
                           error:function(){
                               alert("有误")
                           }
                       })
                   }
               },{
                   text:'关闭',
                   handler:function(){
                       //关闭对话框
                       $('#myDialog').dialog("close");
                   }
               }]

           });

   }