jQuery UI 对话框 - PHP 中的 Ajax

Question

我在 PHP 文件中有一个 HTML 表单，如附加的代码片段：

当我点击“保存详细信息”按钮时，我希望页面加载 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>

Answer 1

您需要提交表单才能发送表单值。逻辑将遵循如下所示：

1. 将函数（例如，submitForm）绑定到表单的提交事件，返回 false 以阻止正常（非 AJAX）表单提交。
2. SubmitForm 函数进行 $.ajax 调用。
3. AJAX 调用配置为在发送请求之前打开对话框（事件：beforeSend）。
4. 对话框中填充了“正在加载...”文本/图像。
5. 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 的情况下工作，只是不会有对话框。

Answer 2

不确定我完全理解你想要做什么，但让我尝试一下......

所以，你想要：

1. 通过 AJAX 将表单详细信息发送到控制器。
2. 将表单数据从控制器保存到DB。
3. 成功后，将显示一个对话框，其中包含“成功”消息和已保存的项目。
4. 出错时（您没有提到这一点），我假设您会显示替代方法，对吗？

查看 jQuery Ajax 方法。