Ajax与form表单

Ajax

Ajax与form表单

1. 什么是表单

image-20230521160625950

2. 表单的组成部分

image-20230521160632957

3.
标签的属性

3.1 概览

image-20230521160640888

3.2 action

image-20230521160647301

3.3 target

image-20230521160653428

3.4 method

image-20230521160700015

3.5 enctype

image-20230521160706060

image-20230521160711733

4. 表单的同步提交及缺点

4.1 什么是表单的同步提交

image-20230521160726092

4.2 表单同步提交的缺点

image-20230521160734997

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

image-20230521160743128

5. 通过Ajax提交表单数据

5.1 监听表单提交事件

image-20230521160806465

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/jquery-3.6.0.js"></script>
</head>

<body>
    <form action="#" target="" method="post" enctype id="form1">
        <input type="text" name="email_or_mobile" />
        <input type="password" name="password" />
        <button type="submit">提交</button>
    </form>

    <script>
        $(function () {

            $('#form1').submit(function (e) {
                alert(123)
                // document.write('监听到了表单的提交事件')
            })

            $('#form1').on('submit', function (e) {
                alert(321)
            })
        })
    </script>
</body>

</html>

5.2 阻止表单默认提交行为

image-20230521160909848

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/jquery-3.6.0.js"></script>
</head>

<body>
    <form action="#" target="" method="post" enctype id="form1">
        <input type="text" name="email_or_mobile" />
        <input type="password" name="password" />
        <button type="submit">提交</button>
    </form>

    <script>
        $(function () {

            $('#form1').submit(function (e) {
                // 阻止表单的提交和页面的跳转
                e.preventDefault()
            })

            $('#form1').on('submit', function (e) {
                // 阻止表单的提交和页面的跳转
                e.preventDefault()
            })
        })
    </script>
</body>

</html>

5.3 快速获取表单中的数据

5.31 serialize()函数

image-20230521160951193

5.32 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/jquery-3.6.0.js"></script>
</head>

<body>
    <form action="#" target="" method="post" enctype id="form1">
        <input type="text" name="email_or_mobile" />
        <input type="password" name="password" />
        <button type="submit">提交</button>
    </form>

    <script>
        // 1. serialize()函数
        // 为了简化表单中数据的获取操作，jQuery 提供了 serialize() 函数，其语法格式如下：
        // $(selector).serialize()
        // serialize() 函数的好处：可以一次性获取到表单中的所有的数据。

        $(function () {
            $('#form1').submit(function (e) {
                e.preventDefault()
                var data=$(this).serialize()
                console.log(data);
                // 调用的结果：
                // username=用户名的值&password=密码的值
                // 注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性！
            })

            $('#form1').on('submit', function (e) {
                e.preventDefault()
                var data1=$(this).serialize()
                console.log(data1);
                // 调用的结果：
                // username=用户名的值&password=密码的值
                // 注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性！
            })
        })
    </script>
</body>

</html>

6. 表单添加图书

image-20230521161106050

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/bootstrap.min.css">
    <script src="../lib/jquery-3.6.0.js"></script>
    <style>
        .comment {
            display: block;
            white-space: nowrap;
            /* 禁止换行 */
            overflow: hidden;
            /* 文字溢出隐藏 */
            text-overflow: ellipsis;
            /* 添加省略号 */
            padding: 0 5px;
        }

        .loading {
            padding: 10px;
            border-radius: 25px;
            z-index: 1;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: auto;
            height: auto;
            background-color: rgb(255, 255, 255);
            font-weight: bold;
        }

        .loading img {
            width: 50px;
            animation: load 1s infinite linear;
        }

        @keyframes load {
            from {
                left: 0px;
            }

            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body style="padding: 10px;">
    <!-- 评论面板 -->

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加图书</h3>
        </div>
        <div class="panel-body">
            <form id="form">
                <div>书名</div>
                <input type="text" id="bookname" class="form-control" name="bookname">
                <div>作者</div>
                <input type="text" id="author" class="form-control" name="author">
                <div>出版社</div>
                <textarea class="form-control" id="publisher" name="publisher"></textarea>
                <button type="submit" class="btn btn-primary" id="send">发表</button>
            </form>
        </div>
    </div>

    <!-- 加载动画 -->
    <div class="loading">
        <img class="load" src="../lib/loading.png" alt="" srcset="">
        <span>加载中...</span>
    </div>

    <!-- 评论列表 -->

    <ul class="list-group">
        <!-- <li class="list-group-item">
            <span class="badge" style="background-color: #f0ad4e;">评论邮箱:</span>
            <span class="badge" style="background-color: #5bc0de;">评论序号:</span>
            <span class="comment">Item</span>
        </li> -->
    </ul>

    <script>
        $(function () {
            // 先调用渲染图书book函数
            setTimeout(book, 1000)

            // 渲染图书book函数
            function book() {
                $.ajax({
                    url: 'http://ajax-api.itheima.net/api/books',
                    type: 'GET',
                    // data: { postId: 8, },
                    dataType: 'json',
                    success: function (data) {
                        $('.list-group').empty()

                        if (data.message === '查询图书列表成功') {
                            data.data.forEach((element, index) => {
                                $('.loading img').attr('src', '../lib/ok.png').css({
                                    animation: 'none'
                                })
                                $('.loading span').html('加载完成!!!')
                                // const comment = $('<li class="list-group-item"><span class="badge" style="background-color: #f0ad4e;">' + data.data[index].author + '</span><span class="badge" style="background-color: #5bc0de;">' + data.data[index].publisher + '</span><span class="comment">' + data.data[index].id + '. ' + data.data[index].bookname + '</span></li>')
                                // es6模板字符串
                                const comment1 = `
                                    <li class="list-group-item" >
                                        <span class="badge" style="background-color: #f0ad4e;">${data.data[index].author}</span>
                                        <span class="badge" style="background-color: #5bc0de;">${data.data[index].publisher}</span>
                                        <span class="comment">${data.data[index].id + '. ' + data.data[index].bookname}</span>
                                    </li>
                                    `
                                $('.list-group').append(comment1);
                                setTimeout(function () {
                                    $('.loading').fadeOut()
                                }, 500)
                            });
                        }

                    }
                })
            }

            // 添加图书
            $('#form').on('submit', function (e) {
                e.preventDefault()
                const addData = $(this).serialize()
                if (bookname === '' || author === '' || publisher === '') {
                    return alert('请完整填写信息！')
                }
                $.ajax({
                    url: 'http://ajax-api.itheima.net/api/books',
                    type: 'POST',
                    data: addData,
                    dataType: 'json',
                    success: function (data) {
                        book()
                        // 清空form表单
                        $('#form')[0].reset()
                    }
                })
            })
        })
    </script>
</body>

</html>

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~