如何使用 AJAX 请求打开 jQuery UI 对话框？答案

【问题标题】：how to open jQuery UI dialog with AJAX request?如何使用 AJAX 请求打开 jQuery UI 对话框？
【发布时间】：2013-10-09 09:06:12
【问题描述】：

在我的网页上，我有一个 jQuery UI 对话框。当我单击按钮（创建新用户）时，它会打开一个新窗口。我的问题是如何使用 AJAX 请求打开该窗口？

从另一个页面打开对话框表单会很好。例如：dialog.html

<div id="dialog-form" title="Create new user">
  <p class="validateTips">All form fields are required.</p>

  <form>
  <fieldset>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
    <label for="email">Email</label>
    <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
    <label for="password">Password</label>
    <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
  </fieldset>
  </form>
</div>

你可以在这个fiddle看到完整的代码：

【问题讨论】：

标签： javascript jquery ajax jquery-ui

【解决方案1】：

你可以像这样定义你的对话框：

function showUrlInDialog(url){
  $.ajax({
    url: 'dialog.html',
    success: function(data) {
      $("#dialog-form").load(data).dialog({modal:true}).dialog('open');
    }
  });
}

然后将对话框表单 div 中的当前标记定义到一个名为 dialog.html 的新页面中。在按钮点击事件上调用上面写的函数。我希望这是您所需要的。

【讨论】：

成功了，谢谢。一个问题：Ajax 在单击时加载那个窗口？还是之前加载？如果我将sql查询写入对话框，我的php页面是在我进入站点时读取sql查询还是在我单击按钮后读取？
它应该在我认为之前加载。只要我上面提到的代码运行，就会请求该页面。您可以通过查看提琴手跟踪来交叉检查。因此，SQL 查询也应该在页面加载时运行，而不是在单击按钮时运行。
好的，伙计，我应该在对话框中写几个 sql 查询。当我开始单击按钮时，我希望 php 发送 sql 请求。点击后写： Please wait, loading ... 几秒钟后打开对话框。您可以在 Facebook 上看到它，当用户想要查看喜欢列表时......几秒钟后打开对话框并显示所有喜欢。
这对你有帮助..8raystech.com/2011/06/28/…
对我来说$("#dialog-form").html(data).dialog({modal: true}).dialog('open');

【解决方案2】：

我认为这是一个更简单的答案：

$("#the-button").click(function(){
  $("#dialog").dialog({modal: true}).dialog('open')).load("dialog.html")
})

【讨论】：

【解决方案3】：

对我来说 .load 不起作用。所以我用了，

function showUrlInDialog(url){
  $.ajax({
    url: 'dialog.html',
    success: function(data) {
      $("#dialog-form").html(data).dialog({modal:true}).dialog('open');
    }
  });
}

【讨论】：