form表单与ajax

1.form表单的组成

form>表单数据（若干个input）+submit提交按钮

1
2
3
4
5

<form action="" method="GET" id="">
	<input type="text" name="username">
	<input type="password" name="password">
	<button type="submit">提交</button>
</form>

(表单元素必须要有name属性)

2.form表单的属性

①action

表单数据的提交地址，表单提交后会自动跳转到该地址页面

②target

页面跳转的方式，一般只用_self和_blank

_self:覆盖当前页面

_blank:打开新的标签页

③method

表单提交的方法，有get方法和post方法

get：提交的数据会自动跟在页面地址的后面 格式为： 页面地址 ?键=值&键=值

post: 提交的数据不会跟在页面地址的后面，比get更安全，一般表单提交数据使用post方法

④enctype

该属性规定了在表单数据发送到服务器之前该如何对数据进行编码

application/x-www-form-urlencoded 在发送表单前对所有字符进行编码（默认值）

multipart/form-data 不对字符进行编码（当涉及到文件上传时，必须使用该值）

3.默认表单同步提交方式的缺陷

①页面会发生跳转

②页面之前的状态和数据会丢失

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

4.ajax+jquery提交表单的方式

①监听表单的提交事件

1
2
3

Ⅰ获取的表单元素.submit(function(e))

Ⅱ获取的表单元素.on('submit',function(e))

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

1

e.preventDefault();

③快速获取表单中的数据

1
2

获取的表单元素.serialize();
// 键=值&键=值...

• ← Previous Post
• Next Post →