【jquery Ajax 】form表单教学+评论案例

✍️ 作者简介: 前端新手学习中。
💂 作者主页: 作者主页查看更多前端教学
🎓 专栏分享：css重难点教学       Node.js教学 从头开始学习

目录

form表单的基本使用

        什么是表单

        表单的组成部分

标签的属性

                 action

                target

                 method

        表单的同步提交以及缺点

                什么是表单的同步提交

                表单提交的缺点

通过Ajax提交表单数据

        监听表单提交事件

        快速获取表单中的数据

                serialize（）函数

案例——评论列表

        渲染UI结构

         获取评论数据

                文档

请求的根路径

评论列表

                代码 

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

                        代码

         发表评论

               文档

发表评论

                修改html表单

                代码

form表单的基本使用

        什么是表单

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

    <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>

   "/login" method="get" id="f1">
        
        
        提交
    
    

         发表评论

               文档

发表评论

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

• 响应格式：

                修改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">
            <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();
                    }
 
            })
 
        })