FORM表单的基本使用

1、什么是表单

负责数据采集功能。HTML中的

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

1.1 form表单的基本属性

点击查看代码

<form action=" " method=" " target="_self">
        <input type="text" name="text" />
        <input type="password" name="password" />
        <input type="checkbox" name="chackbox" checked />
        <button type="submit">提交</button>
    </form>

2、监听表单的提交事件：

点击查看代码

    <form action="/login" method="get"  id="bd">
      <!-- 提交的数据需要设置 name 名  -->
        <input type="text" name="text" />
        <input type="password" name="password" />
        <input type="checkbox" name="chackbox" checked />
        <button type="submit">提交</button>
    </form>
    <script>
        $(function(){
			// jq中的两种方式
            // $('#bd').submit(function(){})
            $('#bd').on('submit', function(e) {
                   // 阻止表单的提交和页面的跳转
                   alert('监听到了表单2');
				   //阻止表单自动提交
                   e.preventDefault()
                   // 定义一个data函数存放数据 this.执行当前  第一种方式        
				   //.serialize()快速获取表单所有数值
                //   var data = $(this).serialize();
                //   console.log(data)
                //   e.preventDefault()
                   // 定义一个data函数存放数据 this.执行当前  第二种方式
                  var data = $('#bd').serialize();
                  console.log(data)
                  e.preventDefault()
            })
        })
    </script>

3、表单案例---评论列表：

发表评论

评论人：

评论内容：

发表评论

## 3.1通过jq的get请求 把数据渲染到下方中 3、1通过jq的get请求 把数据渲染到下方中

点击查看代码

  
	//1、定义一个数组列表
    function getComList(){
        //ajax获取数据渲染页面
        $.ajax({
            metho: "GET",
            url: "http://www.liulongbin.top:3006/api/cmtlist",
           
            //成功回调函数
            success: function (res) {
                if(res.status !== 200) return console.log('获取数据列表失败')
                console.log('获取数据成功');
                //定义一个空数组存放数据
                var row = [];
                //通过函数 $.each()循环后台数据数据
                //循环拼接字符
                $.each(res.data, function (i, itme) { 
                     row.push('<li class="list-group-item">'+itme.content+'<span class="badge" style>评论时间：'+itme.time+'</span><span class="badge">评论人：'+itme.username+'</span></li>')
                });
                //循环完成把数据渲染到页面上面 empty 清空 append追加
                $('#list-sz').empty().append(row.join(''));;

            }   
        });
    }
	//调用
    getComList()

### 3.2 发表数据 提交到服务器中

点击查看代码

    $(function(){
        //1、通过id获取表单采集到的数据 
        $('#formbd').submit(function (e) { 
            //3、阻止表单提交
            e.preventDefault();
            //2、获取表单数据 通过 serialize() 函数全部获取
            //给表单内容添加name属性
            var data = $('#formbd').serialize();
            //4、通过 $.post()提交数据  这里data是当前表单的数据
             $.post("http://www.liulongbin.top:3006/api/addcmt", data,
                function (res) {
                    //判断是否发表成功
                    if (res.status !== 201) {
                        return  alert('发表失败')
                    }
                    //刷新列表
                    getComList();
                    //清空表单信息 通过重置函数reset()
                    $('#formbd')[0].reset()
                },
              );
            
        });
    })