文章目录
前言
本文介绍了表单的基本使用及属性说明,通过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
谢谢观看!ヾ(≧∇≦*)ゝ
今天的文章Ajax提交form表单数据分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/24128.html