form表单基本使用

文章目录

form表单基本使用
- 什么是表单
- form表单的属性
- - 表单的构成
  - 表单的属性
- 表单的同步提交
- - 缺点
  - 解决
Ajax提交表单数据
- 监听表单提交事件
- 表单的默认行为
- 快速获取表单中的数据

什么是表单

表单在网页中主要负责数据采集的功能，HTML中的form标签，主要用于采集用户输入的信息，并通过form标签的提交操作，把采集到的信息提交到服务器端进行处理

form表单的属性

表单的构成

表单由3部分构成

表单标签

表单域（文本框，密码框，多行文本框，复选框，单选框，下拉选择框，文件上传）

表单按钮

form标签的属性
form标签用来采集数据，form标签的属性就是用来规定如何把采集到的数据发送到服务器

表单的属性

action URL地址(后端提供的，这个url地址专门负责接收表单提交过来的数据) 规定提交表单时，向何处发送表单数据
未指定action属性值的情况下，action的默认值未当前页面的url地址

method get或post 规定以何种方式把表单数据提交到 action url
（get 通过url地址栏传递数据，传递的数量小不安全
post 通过http协议传递，传输的数据量大，安全）

enctype 规定在发送表单数据之前如何对其进行编码
application/x-www-form-urlencoded 在发送前编码所有的字符（默认）
multipart/form-data 不对字符编码，文件上传，使用该值
text/plain 空格转换未 + 加号，但不对特殊字符编码(很少用)

    <form action="/login" method="get"><input type="text" name="email" id="" /><br /><input type="password" name="password" /><br /><input type="checkbox" name="remember" checked /><br /><button type="submit">提交</button></form>

表单的同步提交

点击submit按钮，触发表单提交的操作，从而使页面跳转到action url的行为，叫做表单的同步提交

缺点

form表单同步提交后，整个页面发生跳转，跳转到action url指向的地址，用户体验差
form表单同步提交后，页面之前的状态和数据会丢失

解决

表单只负责采集数据，Ajax负责将数据提交到服务器

Ajax提交表单数据

监听表单提交事件

<body><form action="/login" id="f1"><input type="text" name="username" /><br /><input type="password" name="password" /><br /><button type="submit">提交</button></form></body><script>$(function () {$('#f1').submit(function () {alert('监听到表单的提交事件')})})</script>

表单的默认行为

监听到表单提交事件之后，调用事件对象的event.preventDefault()阻止表单的提交和页面的跳转

$(function () {$('#f1').submit(function (e) {alert('监听到表单的提交事件')// 阻止表单的提交和页面的跳转e.preventDefault()})})

快速获取表单中的数据

jQuery提供了serialize()函数,可以一次性的获取到表单中的所有数据（必须为每个表单元素添加name属性）

$(selector).serialize()

 <body><form action="/login" id="f1"><input type="text" name="username" /><br /><input type="password" name="password" /><br /><button type="submit">提交</button></form></body><script>$(function () {$('#f1').submit(function (e) {// alert('监听到表单的提交事件')// 阻止表单的提交和页面的跳转e.preventDefault()var data = $(this).serialize()console.log(data) //username=1111&password=2222})})</script>

jQuery中form表单基本使用相关推荐

jquery表单ajax json数据,jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...
抓取html表单验证码,如何在jquery中利用表单获取短信验证码
如何在jquery中利用表单获取短信验证码发布时间:2021-02-18 15:42:54 来源:亿速云阅读:88 作者:Leah 这期内容当中小编将会给大家带来有关如何在jquery中利用表单获 ...
[转]Joomla! 1.5中form表单的实现方式
原文链接:Joomla! 1.5中form表单的实现方式 Joomla! 1.5中JParameter不但提供了一个xml 和ini文件读取和访问的方式,同时它提供了一个render函数,这个rend ...
html中form表单标签的使用
在html中,表单是经常用到的,用来与用户交互并提交数据.今天要介绍的就是表单标签form标签 "form"作为英文单词有"表格"的意思 1.定义和用法标签是 ...
【jQuery】- form 表单 reset()方法不生效解决
jQuery 对form表单对象直接使用reset()方法是无法生效得,而且可能报错没有reset()这个方法. document.querySelector('#addModal .add-form ...
php同时接受get post,php中form表单同时使用POST和GET传递参数说明
摘要腾兴网为您分享:php中form表单同时使用POST和GET传递参数说明,同花顺,淘集集,尚游戏,美食天下等软件知识,以及医联网,recovernt,wifi控制,音效驱动,板栗直播,畅想听吧, ...
修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
8 jquery 获取 form 表单内容
8 jquery 获取 form 表单内容有时,我们需要获取表单内容进行发送ajax请求,通过函数方式比较方便. $("#title").serialize() 获取一个序列化的 ...
js jquery 清空form表单
js jquery 清空form表单 //js document.getElementById("formId").reset(); //jquery $("#formI ...

jQuery中form表单基本使用

form表单基本使用

文章目录

什么是表单

form表单的属性

表单的构成

表单的属性

表单的同步提交

缺点

解决

Ajax提交表单数据

监听表单提交事件

表单的默认行为

快速获取表单中的数据

jQuery中form表单基本使用相关推荐

最新文章

热门文章