表单提交 表单序列化 常用插件

表单提交

method 规定用于发送表单的HTTP方法(提交表单的方式)

action 规定当提交时向何处发送表单数据(要提交表单的地址)

form表单有一个自动提交的功能(submit)有时候不写submit 也会自动提交。可以默认不写。如果不想要表单自动提交就要写阻止表单自动提交的方法（οnsubmit=“return false;”)。

表单的提交方式有两种:分别是 get提交(为表单的默认提交方式)与post提交。

get请求

请求参数放到请求的地址后面，参数大小受限只能传递几k的数据。由于参数出现在地址后面，所以安全性不能保证。但是速度较快。

应用场景:地址栏发出的请求或超链接发出的请求。

post提交

请求参数放到请求体里面，参数大小没有限制。由于请求参数不可见，所以安全性更高。但是速度较慢。

get 与 post 的区别

• ·get方法是用来从服务器上获取数据，而 post 是用来向服务器上传递修改数据
• ·两者传递参数的方式不一样，get 是将数据直接添加到 ation 所指向的 URL后面;而 post 是将数据放在 form 的数据体中。
• get 是不安全的，因为在传输数据的过程中数据直接暴露在请求的 URL 上，用户可以在浏览器上看到提交的数据，还有一些系统内部信息也会显示在用户面前:而 post 的所有操作，用户都是不可见的。
• ·get 提交传输的数据量少，受限于 URL 的长度限制，而 post 提交没有数据量限制。
• ·get 提交方式获取数据后刷新不会有负面影响，而 post 提交刷新页面重复提交可能会产生不良的后果

表单提交的原则

表单提交主要是通过表单元素的 name = value 进行传递数据的，但是表单提交时需要注意一下原则

• ·name 相同的表单提交格式

如果name 值相同的表单提交，该name 值会出现多次，且对应不同表单的值

• ·没有 name 的表单、含有 disabled 的表单元素

表单元素没有name 属性、含有 disabled 属性都会被禁止提交
在进行表单控制时，如果某一个表单即不可以被编辑但同时也需要被提交，可以设置 readonly 属性，通过给含有 readoniy 属性的表单添加特定的 css样式来模拟 disabled 的样式。
14:46

• ·radio、checkbox 选中值却没有 value 属性

radio、checkbox 选中值却没有 value 属性，提交时只会提示当前 name 表单为 on，不会自动获取 text 的值。如果没有选中值，就不会提交该表单元素，即不会出现当前 name 表单为 off 的情况。
同理 select 标签的被选中的 option 没有 value 属性值也获取不到传递的值

表单提交事件

当提交表单时，会发生submit 事件

事件只适用于元素。
submit0方法触发submit 事件，或规定当发生submit 事件时运行的函数
触发被选元素的 submit 事件:

$(selector).submit();

添加函数到 submit 事件:

$(selector).submit(function() { })

示例代码:

$("form").submit(function()[alert("提交");
J);

表单序列化

表单序列化的两种种方式 serialize()和serializaArray()。

您可以选择一个或多个表单元素 (如输入或文本区)，或表单元素本身
序列化的值可在生成AJAX 请求时用于URL查询字符串中

$(selector).serialize();

示例，输出序列化表单值的结果:

console.1og(s("form") .serialize()) ;

serializaArray()

serializeArray0)方法通过序列化表单值来创建对象 (name和 value) 的数组

$(selector).serializeArray();

实例，输出以数组形式序列化表单值的结果:

console.1og($("form").serializeArray());

也可以把数组中的内容一-获取出来:

var x = $("form").serializeArray();// 显示得到的结果
$.each(x，function(i,item) [$("#result").append(item,name + ":" + item.value + "<br/>");
});

常用插件

iQuery 的插件有很多，这里分享两种供大家参考 Swiperjs 和 wowjs。