Bootstrap

最新推荐文章于 2025-02-25 18:28:33 发布

原创最新推荐文章于 2025-02-25 18:28:33 发布 · 346 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #jquery

Bootstrap 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何利用jQuery的dialog组件创建模态框，并结合Ajax进行表单数据的提交和处理。示例中展示了新增图书的对话框，表单数据通过serialize()方法打包，然后通过Ajax发送到后台Servlet，成功后使用$.messager.alert显示提示信息。此外，还展示了对话框的关闭功能。

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();

   $('#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');
               }
           }]
       });