开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第10天，点击查看活动详情

form表单的基本使用

什么是表单

表单在网页中主要负责数据采集功能，HTML中的

标签，就是用于采集用户输入的信息，并通过标签的提交操作，把采集到的信息提交到服务器端进行处理。

表单的组成部分

三个基本组成部分

表单标签
表单域
表单按钮

点击并拖拽以移动编辑

标签的属性

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

点击并拖拽以移动编辑

action

action属性用来规定当提交表单时，向何处发送表单数据。

action属性的值应该是后端提供的一个url地址，这个url地址专门负责接受表单提交过来的数据。

当表单未指定action属性值的情况下，action的默认值为当前页面的URL地址。

当表单提交后，页面会跳转到action属性指向的地址。

target

target属性用来规定在何处打开 action 的url

它的可选值有五个，默认情况下，target的值是_self,表示在相同的框架中打开action URL。

点击并拖拽以移动编辑

method

method属性用来规定以何种方式把表单数据提交到action URL。

它的可选值有两个，分别是get和post。

默认的情况下，method的值为get，表示通过URL地址的形式，把表单数据提交到action URL

注意：get方式适合用来提交少量的，简单的数据。

post方式适合用来提交大量的，复杂的，或包含文件上传的数据。

在实际开发中，表单的post提交方式用的最多，很少用get，例如登录，注册，添加数据等表单操作，都需要使用post方式来提交表单。

表单的同步提交以及缺点

什么是表单的同步提交

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

表单提交的缺点

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

如何解决表单同步提交的缺点

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

通过Ajax提交表单数据

监听表单提交事件

<body>
    <form action="/login" method="get" id="f1">
        <input type="text" name="user_name">
        <input type="password" name="password">
        <button type="submit">提交</button>
    </form>
    <script>
        $(function () {
            $('#f1').submit(function (e) {
                //阻止默认的跳转
                e.preventDefault();
            })
        })
    </script>
</body>

点击并拖拽以移动

快速获取表单中的数据

serialize（）函数

为了简化表单中数据的获取操作，jquery提供了serialize（）函数，可以一次性获取表单中所有的数据。

   <form action="/login" method="get" id="f1">
        <input type="text" name="user_name">
        <input type="password" name="password">
        <button type="submit">提交</button>
    </form>
    <script>

        $('#f1').submit(function (e) {
            //阻止默认的跳转
            e.preventDefault();

            console.log($(this).serialize());
        })

点击并拖拽以移动

点击并拖拽以移动编辑

结果是一个键值对字符串，键名是name，键值是输入的值，不同的键值对之间用&连接

所以在使用这个函数时，一定要给所有表单添加 name属性。

案例——评论列表

渲染UI结构

<body style="padding: 15px;">

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">发表评论</h3>
        </div>
        <div class="panel-body">
            <div>评论人</div>
            <input type="text" class="form-control">
            <div>评论内容</div>
            <textarea class="form-control"></textarea>
            <button type="submit" class="btn-primary btn">发表评论</button>
        </div>
    </div>

    <ul class="list-group" id="cmt-list">
        <li class="list-group-item">
            <span class="badge" style="background-color: #5bc0de;">评论时间 </span>
            <span class="badge" style="background-color: #5bc0de;;">评论人</span>
            Item 1
        </li>

    </ul>

</body>

点击并拖拽以移动

点击并拖拽以移动编辑

获取评论数据

文档

请求的根路径

http://www.liulongbin.top:3006

评论列表

接口URL： /api/cmtlist
调用方式： GET
参数格式：无
响应格式：

数据名称	数据类型	说明
status	Number	200 成功；500 失败；
msg	String	对 status 字段的详细说明
data	Array	评论列表
+id	Number	评论Id
+username	String	评论人姓名
+content	String	评论内容
+time	String	评论时间

代码

 function getCommenlist() {
            $.ajax({
                type: 'get',
                url: 'http://www.liulongbin.top:3006/api/cmtlist',
                success: function (res) {
                    if (res.statue !== 200)
                        return console.log('获取失败');
                }

            })
        }
        getCommenlist()

点击并拖拽以移动

将获取到的初始数据显示在页面上

代码

   <script>
        function getCommenlist() {
            $.ajax({
                type: 'get',
                url: 'http://www.liulongbin.top:3006/api/cmtlist',
                success: function (res) {
                    if (res.status !== 200)
                        return console.log('获取失败');
                    var rows = []
                    $.each(res.data, function (i, item) {
                        var str = ` <li class="list-group-item">
            <span class="badge" style="background-color: #5bc0de;">评论时间：${item.time}</span>
            <span class="badge" style="background-color: #5bc0de;;">评论名称：${item.username}</span>
            ${item.content}
        </li>`
                        rows.push(str)
                    })
                    $('#cmt-list').empty().append(rows)
                }

            })
        }

        getCommenlist()
    </script>

点击并拖拽以移动

点击并拖拽以移动编辑

发表评论

文档

发表评论

接口URL： /api/addcmt
调用方式： POST
参数格式：

参数名称	参数类型	是否必选	参数说明
username	String	是	评论人名称
content	String	是	评论内容

响应格式：

数据名称	数据类型	说明
status	Number	201 发表评论成功；500 请填写完整的评论信息； 501 执行Sql失败；
msg	String	对 status 字段的详细说明

修改html表单

 <div class="panel-body">
            <div>评论人</div>
            <input type="text" class="form-control">
            <div>评论内容</div>
            <textarea class="form-control"></textarea>
            <button type="submit" class="btn-primary btn">发表评论</button>
        </div>
//外层div换成form表单
//发表评论我们需要获取评论人和评论内容所以我们可以给他添加一个 name属性 
//name属性 要与文档接口 对应
 <form class="panel-body" id="formAddCmt">
            <div>评论人</div>
            <input type="text" class="form-control" name="username">
            <div>评论内容</div>
            <textarea class="form-control"></textarea name="content">
            <button type="submit" class="btn-primary btn">发表评论</button>
        </form>

点击并拖拽以移动

代码

 $('#formAddCmt').submit(function (e) {
            e.preventDefault();
            //decodeURIComponent   解码
            var data = decodeURIComponent($(this).serialize())
            console.log(data);
            $.ajax({
                type: 'post',
                url: 'http://www.liulongbin.top:3006/api/addcmt',
                data: data
                ,
                success:
                    function (res) {
                        console.log(res);
                        if (res.status !== 201)
                            return alert('评论发布失败');
                        getCommenlist()
//转换成dom对象使用reset（）方法重置内容
                       $('#formAddCmt')[0].reset();
                    }

            })

        })

点击并拖拽以移动

文章版权归作者所有，未经允许请勿转载。

THE END