如何在 jquery ui 对话框中提交表单并显示其响应答案

【问题标题】：How to submit form in jquery ui dialog and display its response如何在 jquery ui 对话框中提交表单并显示其响应
【发布时间】：2012-07-04 01:40:14
【问题描述】：

嗨我正在使用 jquery ui 对话框并尝试使用 ajax 提交表单并显示其响应。直到表单对话框和 ajax 请求其正常工作，但不知道如何在同一个对话框中显示其响应。任何可以帮助我的建议。

【问题讨论】：

一些代码可能会有所启发......

标签： jquery jquery-ui-dialog

【解决方案1】：

假设你有以下标记

<div id="__DialogPanel" style="display:none" title=""></div>

使用此代码设置对话框

$("#__DialogPanel").dialog({
    autoOpen: false,
    resizable: false,
    position: 'center',
    stack: true,
    height: 'auto',
    width: 'auto',
    modal: true
});

使用此代码，您可以显示对话框并包含 ajax 调用的结果

$.ajax({
    type: "get",
    dataType: "html",
    url: 'some/url',
    data: {},
    success: function(response) {
        $("#__DialogPanel").empty().html(response).dialog('open');
    }
});

使用此代码，您可以在对话框中提交表单，然后在一切正常时关闭它，如果有错误则再次显示表单

$.ajax({
    type: 'post',
    dataType: 'html',
    url: '/someother/url',
    async: false,
    data: $("#myform").serialize(),
    success: function (response, status, xml) {
        //Check for error here
        if (error) {
            $("#myform").parent().html('').html(response);
        }
        else {
            $("#__DialogPanel").dialog('close');
        }
    }
});

希望对你有帮助！

【讨论】：

【解决方案2】：

我猜你是这样打开对话框的：

$.post('xyz.htm', function(data) { $('#mydialog .mytarget').html(data).slideDown(); });

诀窍是使用回调函数（将响应作为参数获取），并将响应转储到您想要的元素中。

【讨论】：