一、什么是表单
表单在网页中主要负责数据采集功能,HTML中的<form>标签,就是用于采集用户输入的信息,并通过<form>标签的提交操作,把采集到的信息提交到服务器端进行处理
表单的组成部分:
- 表单标签 :<form></form>
- 表单域 : 包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等
- 表单按钮 :buttom
二、表单的属性
<form>标签用来采集数据,<form>标签的属性则是用来规定如何把采集到的数据发送到服务器
属性 | 值 | 说明 |
action | URL地址 | 规定当提交表单时,向何处发送表单数据 |
method | get或post | 规定以何种方式把表单数据提交到action URL |
enctype | application/x-www-form-urlencoded | multipart/form-data | text/plain | 规定在发送表单数据之前如何对其进行编码 |
target | _blank | _self | _parent | _top | 规定在何处打开action URL |
action属性:
- action属性的值应该是后端提供的一个URL地址,这个URL地址专门负责接受表单提交过来的数据
- 当表单在未指定action属性值的情况下,action的默认值为当前页面的URL地址
- 注意:当提交表单后,页面会立即跳转到action属性指定的URL地址
method:
- get方式适合用来提交少量的、简单的数据
- post方式适合用来提交大get方式量的、复杂的、或包含文件上传的数据-较隐蔽
- 默认值 get,表示通过URL地址的形式,把表单数据提交到action URL
enctype:
- application/x-www-form-urlencoded 在发送前编码所有字符(默认)
- nultipart/form-data 不对字符编码 在使用包含文件上传控件的表单时,必须使用该值
- text/plain 空格转换为“+”加号,但不对特殊字符编码(很少用)
注意事项:
- 在涉及到文件上传的操作时,必须将enctype的值设置为multiparty/form-data
- 如果表单的提交不涉及到文件上传操作,则直接设置为默认值
target:
默认情况下,target的值是_self,表示在相同的框架中打开action URL。
- _blank 在新窗口中打开
- _self 默认 在相同的框架/窗口中打开
- _parent 在父框架集中打开
- _top 在整个窗口中打开
- framename 在指定的框架中打开
三、表单的同步提交
表单的同步提交:通过点击submit按钮,触发表单提交的操作,从而使页面跳转到action URL的行为,叫做表单的同步提交
存在的缺点:页面会发生跳转;页面之前的状态和数据会丢失
解决方案:表单只负责采集数据,Ajax负责将数据提交到服务器
3.1、通过Ajax提交表单数据
监听表单事件:
方法一、
$('#form1').submit(function(e){
alter('监听到了表单的提交事件')
)}方法二、
$('#form1').on('submit',function(e) {
alert('监听到了表单的提交事件')
)}
阻止表单的默认行为:
当监听到表单的提交事件之后,可以调用事件对象的event.preventDefault()函数,来阻止表单的提交和页面的跳转
快速获取表单里的数据:
其中serialize()方法是获取表单所有的数据
- 好处:serialize()函数可以一次性获取表单中的所有的数据
- 使用此函数快速获取表单数据 表单每个input表单元素都要有name属性
<form id="form1"> <input type="text" name="username" /> <input type="password" name="username"/> <button type="submit">提交</button> </form> <script> $('#form1').submit(function(e){ e.preventDefault(); //serialize()获取表单所有的数据 var data = $(this).serialize(); console.log(data); }) </script>
用一个案例让大家更好的理解form 获取数据 ajax提交数据
效果图:
点击发表评论,将表单里面的数据渲染到评论列表 获取给定接口里面的数据
先来看看我们html框架【html框架就是用bootstrap模版生成的】
<body style="padding: 15px;">
<!-- 评论面板 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">发表评论</h3>
</div>
<form class="panel-body" id="formAddCmt">
<div>评论人:</div>
<input type="text" class="form-control" name="username" />
<div>评论内容:</div>
<textarea class="form-control" name="content"></textarea>
<button type="submit" class="btn btn-primary">发表评论</button>
</form>
</div>
<!-- 评论列表 -->
<ul class="list-group cmt-list">
<li class="list-group-item">
<span class="badge" style="background-color: #F0AD4E;">评论时间:</span>
<span class="badge" style="background-color: #5BC0DE;">评论人</span>
</li>
</ul>
</body>
js
首先获取评论,将评论渲染到页面
通过ajax获取给定的路径,将评论内容渲染到页面
function getData() { $.ajax({ method: 'GET', url: 'http://www.liulongbin.top:3006/api/cmtlist', success: function (res) { if (res.status !==200) { return alert("获取数据失败!") } var rows = []; $.each(res.data, function (i, item) { rows.push('<li class="list-group-item">'+item.content+'<span class="badge" style="background-color: #F0AD4E;">评论时间:'+item.time+'</span><span class="badge" style="background-color: #5BC0DE;">评论人:'+item.username+'</span>Item 1</li>') }) $('.cmt-list').empty().append(rows.join('')) } }) } getData();
发表评论
$(function () { $("#formAddCmt").submit(function (e) { e.preventDefault(); var data = $(this).serialize(); $.ajax({ method: "POST", data, url: 'http://www.liulongbin.top:3006/api/addcmt', success: function (res) { if (res.status !==201) { return alert('发表评论失败'); } getData(); $("#formAddCmt")[0].reset();//将表单里面的数据重制 } }) }) })
博主就分享到这里啦