文章目录
前言一、form表单介绍1.什么是表单2.表单form的组成部分3.表单form的属性4.表单的同步提交二、Ajax 提交表单数据1.监听表单的提交事件2.阻止表单的默认提交行为3.快速获取表单中的数据4.通过Ajax请求提交表单数据给服务器总结前言
本文介绍了表单的基本使用及属性说明,通过Ajax请求方式将网页表单数据提交到服务器的具体实现过程，代码实现在文章末尾。
一、form表单介绍
1.什么是表单
表单在网页中主要负责数据采集功能,采集用户输入信息提交到服务器端进行处理。常见登陆注册页面就是通过表单实现的
2.表单form的组成部分
表单标签表单域 文本框密码框隐藏域多行文本框复选框单选框下拉选择框文件上传框… 表单按钮3.表单form的属性
action 指定表单数据提交的地址
注意：当表单提交后，页面会立即跳转到action属性指定的URL地址
target ： 指定action URL 打开的位置, 有5个可选值。
_self 默认值。在相同框架中打开
_blank 在新窗口中打开
_parent 在父框架中打开（很少用）
_top 在整个窗口中打开（很少用）
framename 在指定的框架中打开（很少用）
method ：指定将表单数据提交到action URL 的方式，有2个可选值，大小写都可以。
get 默认值。
post
enctype ： 规定发送表单数据之前如何对数据进行编码，有3个可选值。
application/x-www-form-urlencoded 在发送前编码所有字符（默认）
multiparty/form-data 不对字符编码。注意：包含文件上传控件时，必须使用该值。
text/plain 空格转换为“+”加号，但不对特殊字符编码。（很少用）
4.表单的同步提交
通过点击表单中的submit按钮，触发表单提交的操作，从而使页面跳转到action URL 的行为，叫做表单的同步提交。
但是表单的同步提交会带来两个问题
1、表单同步提交后，整个页面立即跳转到action URL，用户体验很差。
2、表单同步提交后，页面之前的状态和数据会丢失。
解决方案：
表单只负责采集数据，Ajax负责将数据提交到服务器。
二、Ajax 提交表单数据
Ajax提交表单数据主要分为以下几步：
1.监听表单的提交事件
2.阻止表单的默认提交行为
通过e.preventDefault()方法，阻止表单发生同步提交
3.快速获取表单中的数据
为了简化表单中数据的获取操作，jQuery提供了serialize（）函数注意：在使用此函数快速获取表单数据时，必须为每个表单元素添加name属性。
4.通过Ajax请求提交表单数据给服务器
具体实现过程代码如下：
<!-- 一个简单的表单结构 --><form action="/login" id = "f1"><input type="text" name="user_name" /><input type="password" name="password" /><button type="submit" >提交</button></form>
<script>$(function () {// 1.监听表单的提交事件 $('#f1').on('submit', function (e) {e.preventDefault() // 2.阻止表单的默认行为var formdata = $('#f1').serialize() // 3. 快速获取表单中的数据//调用的结果：// username=用户名的值&password=密码的值//因为函数返回结果会用表单元素的name属性来表示，//所以使用serialize()快速获取表单数据时需要为每个表单元素设置name属性且不重复// 4.使用$.ajax()发起POST请求$.ajax({type : 'POST', //请求方式url : 'http:///www.blabala......', //请求的URL地址data:{formdata},success: function(res) {//请求成功后的回调函数console.log(reg);}})})})</script>
总结
需要注意的几个点：
阻止表单的默认提交行为使用serialize（）函数获取表单数据需要先给每个表单元素设置name属性表单需要上传文件时，必须将表单属性 enctype设置为multiparty/form-data
谢谢观看！ヾ(≧∇≦*)ゝ
