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

你真的了解input表单吗？---采集用户输入的信息 一、什么是表单

 

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

表单域  ：  包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等

表单按钮 ：buttom 

二、表单的属性 

 

 用一个案例让大家更好的理解form 获取数据 ajax提交数据

效果图：

点击发表评论，将表单里面的数据渲染到评论列表 获取给定接口里面的数据

先来看看我们html框架【html框架就是用bootstrap模版生成的】

    
    
        
            发表评论
        
        
    

    
    

        

            评论时间：
            评论人
        
    

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('
'+item.content+'评论时间：'+item.time+'评论人:'+item.username+'Item 1
')
            })
            $('.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();//将表单里面的数据重制
            }
        })
    })
})

博主就分享到这里啦