在网页开发中，经常需要在用户输入表单数据后将其提交至服务器。而jQuery UI对话框则提供了一个简单易用的方式来完成这个任务。本文将详细介绍如何使用jQuery UI对话框进行表单提交，并提供一些实用示例。
引入jQuery与jQuery UI库文件
在代码中引入jQuery和jQuery UI库文件，以便在页面中使用相关的函数和组件：
<!-- 引入jQuery --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- 引入jQuery UI --> <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
创建对话框
在页面代码中创建一个对话框元素：
-- -------------------- ---- -------
---- ------------------- -------------
------
----------
------ ---------------------
------ ----------- ----------- --------- ----------- ----------------- ---------------
----
------ ----------------------
------ ----------- ------------ ---------- -------- ----------- ----------------- ---------------
-----------
-------
------其中 id、title 分别为对话框的标识符和标题内容。表单元素中的 name 属性和 id 属性将在提交时用到。
使用以下代码初始化对话框，并将其隐藏：
-- -------------------- ---- -------
------------ -
-----------------------------
--------- ------
------- ----
------ ----
------ -----
-------- -
----- -----------
----- ---------- -
------------------------
-
--
------ ---------- -
----------------
-
---
---其中 autoOpen 选项设为 false，表示页面加载完成后该对话框默认不会显示。height 和 width 分别指定对话框的高度和宽度。modal 选项设为 true，表示该对话框是模态的，即用户必须在关闭对话框前进行操作。buttons 选项指定了两个按钮：一个用于提交表单，一个用于关闭对话框。close 选项则在关闭对话框时重置表单。
提交表单
提交表单需要编写一个 JavaScript 函数，以下是一个示例：
-- -------------------- ---- -------
-------- ------------ -
--- ---- - -----------------
--- ----- - ------------------
-------------- -- - -- ------------ -- -- -
---------------------
------ ------
-
--------
----- -------
---- -------------
----- - ----- ----- ------ ----- --
-------- -------------- -
---------------
-------------------------------------
--
------ ---------- -
---------------------
-
---
------ -----
-该函数获取表单中输入框的值，检查其是否为空，并将其作为 POST 请求的数据发送至服务器。如果提交成功，则显示成功提示并关闭对话框；否则显示错误提示。
打开对话框
在页面中使用按钮或其他交互元素来触发打开对话框的操作，以下是一个示例：
<button id="submit-form-button">提交表单</button>
使用以下代码监听按钮点击事件，并在点击时打开对话框：
$(function() {
$("#submit-form-button").click(function() {
$("#my-dialog-form").dialog("open");
});
});总结
本文介绍了如何使用 jQuery UI 对话框完成表单提交，并提供了相应
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10012
