HTML 表单是网站中最基本的用户交互组件之一。通过使用 JavaScript，我们可以对表单元素做更多的控制和操作，包括数据验证、动态更新页面内容等。在本文中，我将介绍如何在 HTML 表单中调用 JavaScript，并提供一些示例代码和指导意义。
使用 onclick 事件处理程序
在 HTML 表单中，我们可以使用 onclick 事件处理程序来调用 JavaScript 函数。该事件在用户点击特定元素时触发，例如按钮或链接。以下是一个基本的示例：
--------- -----
------
------
--------- ------------------
--------
-------- ------------- -
------------- ---------
-
---------
-------
------
------- -------------------------------------
-------
-------在这个示例中，我们定义了一个名为 showMessage() 的 JavaScript 函数，在用户点击按钮时弹出一个警告框。在 HTML 按钮元素中，我们使用 onclick 属性将 showMessage() 函数与按钮关联起来。
使用表单提交事件
除了使用 onclick 事件处理程序外，我们还可以使用表单提交事件来调用 JavaScript 函数。该事件在用户提交表单时触发，我们可以在其中执行一些额外的逻辑，例如验证表单数据是否有效。以下是一个示例：
--------- -----
------
------
---------------------
--------
-------- -------------- -
--- ---- - ---------------------------------------
-- ----- -- --- -
----------------
------ ------
-
-
---------
-------
------
----- ------------- ---------------- ----------------
------ ----------------------
------ ----------- --------- ------------
------ ------------- -----------
-------
-------
-------在这个示例中，我们定义了一个名为 validateForm() 的 JavaScript 函数，在用户提交表单时验证名称字段是否为空。在 HTML 表单元素中，我们使用 onsubmit 属性将 validateForm() 函数与表单关联起来，并使用 return 关键字确保仅当验证通过时才允许表单提交。
使用 AJAX 技术
另一种常见的方式是使用 AJAX 技术从表单中调用 JavaScript 函数。AJAX 允许我们异步加载数据，而不必重新加载整个页面。以下是一个基本的示例：
--------- -----
------
------
----------- ----------
------- --------------------------------------------------------------------------------
--------
-----------------------------
----------------------------------- -
-----------------------
--- ---- - --------
--- --- - --------------------
--------
----- -------
---- ----
----- -----------------
-------- --------------
-
------------------
-
---
---
---
---------
-------
------
----- ----------- --------------------------
------ ----------------------
------ ----------- --------- ------------
------ ------------- -----------
-------
-------
-------在这个示例中，我们使用 jQuery 库来简化 AJAX 请求的编写。在表单元素中，我们使用 id 属性将其与 JavaScript 代码关联起来，并使用 event.preventDefault() 方法来防止表单提交重载页面。在 AJAX 请求成功后，我们弹出一个警告框，表示表单已经成功提交。
总结
在本文中，我们探讨了在 HTML 表单中调用 JavaScript 的几种方式，包括使用 onclick 事件
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26214