[JavaScript知识库]form表单提交数据

form表单介绍

属性：

①action 规定当提交表单时，向何处提交表单数据

后端提供的一个url地址，负责接受表单提交过来的数据

在未指定action属性的情况下，action默认值为当前页面的url地址

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

②target 规定在何处打开action的url

它的可选项有五个，默认情况下，target的值是_self，表示在相同的框架中打开action的url

_blank 在新窗口打开

_self ??在相同框架打开

_parent 在父框架中打开

_top 在整个窗口打开

framename 在指定的框架打开

③method 规定以何种方式把表单数据提交到action的URL

他的可选值有get和post

默认情况值是get 表示通过url地址的形式，把表单数据提交到action的url

get方式适合少量、简单的数据

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

④enctype 规定在发送表单数据之前如何对数据编码

它的可选值有三个，

默认情况下值是application/x-www-form-urlencoded 表示在发送前编码所有字符

multipart/form-data 不对字符编码，在使用包含文件上传控件的表单时，必须使用该值

text/plain 空格转换为+加号，但不对特殊字符编码

表单的同步提交

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

缺点：

①整个页面会发生跳转，跳转到action的url所指向的地址，用户体验很差

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

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

通过Ajax提交表单数据

监听表单提交事件

在jquery中有两种方式

①

$(‘#form1’).submit(function(){

alter(‘监听到了表单的提交事件’)

})

②

$(‘#form1’).on(‘submit’,function(){

alter(‘监听到了表单的提交事件’)

})

阻止表单的默认提交行为（跳转行为）

event.preventDefault()

快速获取表单的数据

$(‘#form1’).serialize() ?可以一次性获取到表单中的所有数据

调用的结果示例：username=用户名的值&password=密码的值

注意：使用该函数时，必须为每个表单元素添加name属性