你真的了解input表单吗？—采集用户输入的信息

admin • • 运维

一、什么是表单

 

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

表单的组成部分：

  1. 表单标签  ：<form></form>
  2. 表单域  ：  包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等
  3. 表单按钮 ：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：

  1. get方式适合用来提交少量的、简单的数据
  2. post方式适合用来提交大get方式量的、复杂的、或包含文件上传的数据-较隐蔽
  3. 默认值 get，表示通过URL地址的形式，把表单数据提交到action URL

enctype：

  1. application/x-www-form-urlencoded 在发送前编码所有字符（默认）
  2. nultipart/form-data 不对字符编码 在使用包含文件上传控件的表单时，必须使用该值
  3. 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();//将表单里面的数据重制
            }
        })
    })
})

博主就分享到这里啦

 

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>