UI Dialog 中使用 AJAX 装载内容

最新推荐文章于 2021-11-17 14:19:26 发布

转载最新推荐文章于 2021-11-17 14:19:26 发布 · 1.8k 阅读

文章标签：

#dialog #ajax #ui #xmlhttprequest #function #html

本文介绍如何使用jQuery UI Dialog组件结合Ajax动态加载内容。通过两种Ajax调用方式实现dialog内容的异步加载，并展示了dialog的初始化配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何在显示 jQuery UI Dialog 中，以 ajax 方式调入 dialog 中显示的内容呢?

一种格式是：

Js代码
1.$( "#myDialog" ).load( openUrl, postData ,
2.    function (responseText, textStatus, XMLHttpRequest) {
3.        $("#myDialog" ).dialog( 'open' );   // 打开对话框
4.    }
5.);
$("#myDialog").load( openUrl, postData ,
  function (responseText, textStatus, XMLHttpRequest) {
   $("#myDialog").dialog('open'); // 打开对话框
  }
);

另一种 ajax 调用格式则是：

Js代码
1.$.ajax({ type: "POST" , url: openUrl , data: jsonPostData,
2.    success: function (html,textStatus, XMLHttpRequest){
3.        $("#myDialog" ).html(html).dialog( 'open' );
4.    }
5.});
$.ajax({ type: "POST", url: openUrl , data: jsonPostData,
  success: function(html,textStatus, XMLHttpRequest){
   $("#myDialog").html(html).dialog('open');
  }
});

其实，这只是jQuery 的 ajax 调用的两种方式，与 dialog 无关。

至于 dialog 的初始化工作，则需要在之前进行，比如：

Js代码
1.jqDialog.dialog({
2.    bgiframe: true ,
3.    autoOpen: false ,
4.    resizable: false ,
5.    width:650, Height:500,
6.    modal: true ,
7.    overlay: { backgroundColor: '#000' , opacity: 0.5   },
8.    close: function () { ... },
9.    open: function () { ... },
10.    buttons: {
11.        '选定当前记录' : function () {... },
12.        '取消' : function () {
13.            $(this ).dialog( 'close' );
14.        }
15.    }
16.});
  jqDialog.dialog({
   bgiframe: true,
   autoOpen: false,
   resizable: false,
   width:650, Height:500,
   modal: true,
   overlay: { backgroundColor: '#000', opacity: 0.5 },
   close: function() { ... },
   open: function() { ... },
   buttons: {
    '选定当前记录': function() {... },
    '取消': function() {
     $(this).dialog('close');
    }
   }
  });