jQuery UI 对话框 - PHP 中的 Ajax答案

【问题标题】：jQuery UI Dialog - Ajax in PHPjQuery UI 对话框 - PHP 中的 Ajax
【发布时间】：2009-12-11 16:26:56
【问题描述】：

我在 PHP 文件中有一个 HTML 表单，如附加的 sn-p：

当我点击“保存详细信息”按钮时，我希望页面加载一个jQuery UI 模式对话框。该对话框将通过Ajax 执行控制器操作（例如：savedetails）。本质上，控制器操作将获取“frmEmployees”中的所有 POST 详细信息，并通过 Ajax 将更改保存到数据库。

我对加载包含 Ajax 内容的对话框的逻辑感兴趣（通过控制器操作获取所有 POST 变量，例如通过 Ajax 的“/public/empdetailcontroller”）。所以，到目前为止，我有一些类似于下面的 HTML。

有什么想法吗？

片段：

    <form name="frmEmployees" id="frmEmployees" method="POST" action="">
        <table>
            <tr><td>Name:</td><td><input type="text" name="empName" size="50"></td></tr>
            <tr><td>City:</td><td><input type="text" name="empCity" size="50"></td></tr>
            <tr><td>Country:</td><td><input type="text" name="empCountry" size="50"></td></tr>
            <tr><td colspan=2 align=center><input type="button" name="btnsubmit" value="Save Details"></td></tr>
        </table>
    </form>

    <div id="dialogSaveChanges"
         title="Saving.."
         style="display:none;"><p><span
           class="ui-icon
           ui-icon-info"
           style="float:left; margin:0 7px 20px 0;"
           ></span><span id="dialogText-savechanges"></span></p></div>

    <script language="JavaScript>
        $(document).ready(function() {
            $('#dialogSaveChanges').dialog({
                        autoOpen: false,
                        width: 400,
                        modal: true,
                        title: titleText,
                        closeOnEscape: false,
                        open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
                        resizable: false,
                buttons: {
                    Ok: function() {
                        $(this).dialog('close');
                    }
                }
            });
            $('#btnSaveChanges').click(function() {
                $('#dialogSaveChanges').dialog('open');
                $("span#dialogText-savechanges").html("Your Changes have been saved successfully.");
            });
        });
    </script>

【问题讨论】：

标签： php jquery-ui jquery jquery-dialog

【解决方案1】：

您需要提交表单才能发送表单值。逻辑如下：

将函数（例如 submitForm）绑定到表单的提交事件，返回 false 以阻止正常（非 AJAX）表单提交。
submitForm 函数调用 $.ajax。
AJAX 调用配置为在发送请求之前打开对话框（事件：beforeSend）。
对话框中填充了“正在加载...”文本/图像。
在 ajax 调用成功或失败时（事件：成功/失败），对话框中会填充结果或错误消息。

代码可能如下所示：

$('#frmEmployees').submit( function() {
  $.ajax({
    url: this.attr('action'), // Make sure your form's action URL is correct.
    method: 'POST',
    data: this.serialize(), // this = $('#frmEmployees')
                            // Add hidden form inputs to send any control
                            // parameters to your server script.
    beforeSend: openDialogFunction,
    success: handleFormSuccess,
    failure: handleFormFailure
  });

  return false; // prevent normal form submission.
});

如果你这样编程，你的页面也可以在没有 javascript 的情况下工作，只是没有对话框。

【讨论】：

老问题我知道，但仅供参考，您不需要提交表单，至少不是那样。许多 js 库（Dojo、Extjs）提供了通过 ajax “提交”表单的方法。这实际上只是获取所有表单元素并使用名称：值对创建一个对象的问题。

【解决方案2】：

不确定我是否完全理解您要做什么，但让我试试...

所以，你想：

通过 AJAX 将表单详细信息发送到控制器。
将表单数据从控制器保存到数据库中。
成功后，会显示一个对话框，其中包含“成功”消息和已保存的项目。
如果出现错误（您没有提到这一点），我假设您会显示另一种方法，对吗？

查看jQuery Ajax methods。

【讨论】：