---

前言

定制网站本文介绍了表单的基本定制网站使用及属性说明,定制网站通过方式将网页表单数定制网站据提交到服务器的具体实现过程，定制网站代码实现在文章末尾。

---

一、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()方法，阻止表单发生同步提交
1

3.快速获取表单中的数据

为了简化表单中数据的获取操作，jQuery提供了serialize（）函数注意：在使用此函数快速获取表单数据时，必须为每个表单元素添加name属性。
1
2

4.通过Ajax请求提交表单数据给服务器

具体实现过程代码如下：

  <!-- 一个简单的表单结构 -->  <form action="/login" id = "f1">    <input type="text" name="user_name" />    <input type="password" name="password" />    <button type="submit" >提交</button>  </form>
1
2
3
4
5
6

  <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

---

总结

需要注意的几个点：

• 阻止表单的默认提交行为
• 使用serialize（）函数获取表单数据需要先给每个表单元素设置name属性
• 表单需要上传文件时，必须将表单属性 enctype设置为multiparty/form-data

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