0

我在 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>
4

2 回答 2

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 的情况下工作，只是没有对话框。

于 2009-12-11T16:43:50.940 回答
0

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

所以，你想要：

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

查看jQuery Ajax 方法。

于 2009-12-11T16:45:17.193 回答