form表单与模块引擎

1.form表单的基本使用

1.1什么是表单

表单在网页中主要负责数据采集功能。HTML中的<form>标签，就是采集用户输入的信息，并通过<form>标签的提交操作，把采集到的信息提交到服务器端进行处理。

1.2表单的组成部分

表单由三部分组成：1.表单标签 2.表单域 3.表单按钮

1.3<form>标签的属性

<form>标签用来采集数据，<form>标签的属性则是用来规定如何把采集到的数据发送到服务器。 

1.action

action属性用来规定当前提交表单时，向何处发送表单数据。

action属性的值应该是后端提供的一个URL地址，这个URL地址专门负责接收表单提交过来的数据。

当<form>表单在未指定action属性值的情况下，action的默认值是当前页面的URL地址。

注意：当提交表单后，页面会立即跳转到action属性指定的URL地址。

2.target

target属性用来规定在何处打开 action URL

他的可选值有5个，在默认情况下，target的值是_self，表示在相同的框架中打开action URL。

 3.method

method属性用来规定以何种方式把表单数据提交到action URL。

他的可选值有两个，分别是get和post

在默认情况下，method的值为get，表示通过URL地址的形式，把表单数据提交到action URL。

注意：

get方式适合用来提交少量的、简单的数据

post方式适合用来提交大量的、复杂的、或包含文件上传的数据。

在实际开发中用到的post方式是最多的，很少用到get

4.enctype

enctype属性用来规定在发送表单数据之前如何对数据进行编码。

它的可选值有三个，默认情况下，enctype的值为application/x-www-form-urlencoded，表示在发送前编码所有字符。

 注意：在涉及到文件上传的操作时，必须将enctype的值设置为multipart/form-data

如果表单提交不涉及到文件上传操作，则直接将enctype的值设置为application/x-www-form-urlencoded即可。

1.4表单的同步提交及缺点

1.什么是表单的同步提交

通过点击submit按钮，触发表单提交的操作，从而使页面跳转到action URL的行为，叫做表单的同步提交。

2.表单同步提交的缺点

（1）<form>表单同步提交后，整个页面会发生跳转，跳转到action URL 所指向的地址，用户体验感极差。

（2）<form>表单同步提交后，页面之前的状态和数据会丢失。

3.如何解决表单同步提交的缺点

解决方案：表单只负责采集数据，Ajax负责将数据提交到服务器。

2.通过Ajax提交表单数据

2.1监听表单提交事件

在jQuery中，可以有两种方式，可以监听到表单的提交事件：

第一种方式：首先获取到表单，然后调用表单的submit函数，然后提供一个回调函数，就能监听到表单的提交事件。

第二种方式：首先获取到表单，然后调用.on函数，给表单绑定一个submit事件，也可以监听到表单提交事件。

复制代码
<body>
  <form action="/login" id="f1">
    <input type="text" name="user_name">
    <input type="password" name="password">
    <button type="submit">提交</button>
  </form>
  <script>
    $(function () {
      // 第一种方式
      $('#f1').submit(function () {
        alert('监听到了表单的提交事件')
      })
      // 第二种方式
      $('#f1').on('submit', function () {
        alert('监听到了表单的提交事件');
      })
    })
  </script>
</body>
复制代码

2.2阻止表单的默认提交行为

当监听到表单的提交事件后，可以调用事件对象的event.preventDefault()函数，来阻止表单的提交和页面的跳转，示例代码如下：

2.3快速获取表单中的数据

1.serialize()函数

为了简化表单中数据的获取操作，jQuery提供了serialize()函数，其语法格式如下：

serialize()函数的好处：可以一次性获取到表单中的所有的数据

2.serialize()函数示例

 注意：在使用serialize()函数快速获取表单数据时，必须每个表单元素添加name属性 0

posted @   RoddyBryce  阅读(35)  评论(0)  编辑  收藏  举报
相关博文：
· Ajax加强
· JavaScript 简单数据类型与复杂数据类型
· Form表单的基本使用
· form 表单基本使用
· Ajax day02
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示
AI IDE Trae