Ajax提交form表单数据

文章目录

前言

本文介绍了表单的基本使用及属性说明,通过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请求提交表单数据给服务器

具体实现过程代码如下：

<!-- 一个简单的表单结构 --><formaction="/login"id="f1"><inputtype="text"name="user_name"/><inputtype="password"name="password"/><buttontype="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

谢谢观看！ヾ(≧∇≦*)ゝ