.serialize()；获取所有的表单数据 reset()；清空表单手动输入的内容

最新推荐文章于 2024-03-03 17:38:39 发布

原创最新推荐文章于 2024-03-03 17:38:39 发布 · 288 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

.serialize()；获取所有的表单数据 reset()；清空表专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了JavaScript中用于表单数据处理的.serialize()方法，用于序列化表单数据，方便发送到服务器。同时，文章还讲解了.reset()方法，它能清除表单内所有手动输入的内容，使表单恢复到初始状态。通过这两个方法，开发者可以更高效地管理表单数据和交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    $(function () {
        function fn() {
            $.ajax({
                method: 'GET',
                url: 'http://www.liuljhjhjhjhjhin.top:3006/api/cmtlist',

                success: function (res) {
                    console.log(res);
                    if (res.status !== 200) return alert('请求数据失败')
                    var aar = [];
                    //循环出data中的数据  i索引 item当前项
                    $.each(res.data, function (i, item) {
                        var arr = ` <li class="list-group-item">
                            <span class="badge" style="background-color: #F0AD4E;">评论时间：${item.time}</span>
                            <span class="badge" style="background-color: #5BC0DE;">评论人：${item.username}</span>
                            ${item.content}
                        </li>`
                        //push()添加的数据
                        aar.push(arr);
                    })
                    //(empty()清空数据 表格里面的) (append()(HTML里面)元素结尾插入内容)
                    //(join() 方法用于把数组中的所有元素放入一个字符串)
                    //渲染列表
                    $('#cmt-list').empty().append(aar.join(''))
                },
            })
        }
        fn()
        //监听表单的默认提交事件
        $('#formAddCmt').on('submit', function (e) {
            //阻止表单的默认提交行为
            e.preventDefault();
            //获取所有的表单数据
            var frr = $(this).serialize();
            console.log(frr);
            $.post('http://www.liuljhjhjhjhjhin.top:3006/api/addcmt', frr, function (ress) {
                if (ress.status !== 201) return alert('发表失败')

            })
            fn()
            //把表单转成DOM对象再用DOM里面的方法reset();清空手动输入的内容
            $('#formAddCmt')[0].reset();
        })
    })




<!-- 评论面板 -->
<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" autocomplete="off" />
        <div>评论内容：</div>
        <textarea class="form-control" name="content"></textarea>

        <button type="submit" class="btn btn-primary">发表评论</button>
    </form>
</div>


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