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请求提交表单数据给服务器

具体实现过程代码如下：

  <!-- 一个简单的表单结构 -->
  <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

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