jquery中的ajax表单提交（$.ajax()方法）

最新推荐文章于 2024-08-10 10:11:23 发布

小龙爷ღ

最新推荐文章于 2024-08-10 10:11:23 发布

阅读量596

点赞数

分类专栏： JQuery 文章标签： ajax jQuery中的ajax ajax表单提交

本文链接：https://blog.csdn.net/qq_45086879/article/details/100097370

版权

JQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

今天要讲的是jQuery中的$.ajax()方法，它是jQuery最底层的Ajax实现

①$.ajax()方法常用参数解释

url	(默认为当前页地址)发送请求的地址
type	请求方式(POST或GET)默认为GET。
data	发送到服务器的数据，如果不是字符串，将自动转换为字符串格式
dataType	预期服务器返回的数据类型，一般为 json：返回JSON数据 text：返回纯文本字符串
success	请求成功后调用的回调函数，有两个参数： 1）由服务器返回，并根据dataType参数进行处理后的数据 2）描述状态的字符串

②登录示例1：当然这里得前后台交互，需要从后台获取数据，我们看看ajax的结构就好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证validate</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="js/jquery.validate.regex.js"></script>
    <style type="text/css">
        input:focus,text{
            border: 1px solid #f00;
            background: #fcc;
        }
        *{font-family: Verdana;font-size: 96%;}
        label { width: 10em; float: left; }
        label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
        p { clear: both; }
        .submit { margin-left: 12em; }
        em { font-weight: bold; padding-right: 1em; vertical-align: top; }
    </style>
    <script>
        $(function () {
            $("#myForm").validate({
                rules: {
                    username: {
                        required: true,
                        regex: /^\w{4,20}$/
                    },
                    password: {
                        required: true,
                        regex: /^\w{4,20}$/
                    },
                    repassword: {
                        required: true,
                        regex: /^\w{4,20}$/,
                        equalTo: "#psd"
                    },
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    username: {
                        required: "请输入姓名",
                        regex: "用户名格式不正确"
                    },
                    password: {
                        required: "请输入密码",
                        regex: "密码格式不正确"
                    },
                    repassword: {
                        required: "请输入密码",
                        regex: "密码格式不正确",
                        equalTo:"两次密码不一致"
                    },
                    email: {
                        required: "请输入Email地址",
                        email: "请输入正确的email地址"
                    }
                },
                //ajax提交
                submitHandler: function (form) {
                    $.ajax({
                        url:"http://localhost:8080/check",
                        type:"post",
                        data:{
                            'userName': $("input[name='username']").val(),
                            'password': $("input[name='password']").val()
                        },
                        dataType:"text",
                        success:function (data) {
                            if (data == "true"){
                                location.href="show.html";
                            }else {
                                $("#errorMsg").html("用户名或密码错误")
                            }
                        }
                    })
                }
            })
        })
    </script>
</head>
<body>
<form id="myForm" action="">
    <p>
        <label for="username">用户名:</label><em>*</em>
        <input id="username" type="text" name="username"><span id="messdiv"></span><br>
    <p>
        <label for="psd">密码:</label><em>*</em>
        <input id="psd" type="password" name="password"><br>
    </p>
    <p>
        <label for="rePsd">再次输入密码:</label><em>*</em>
        <input id="rePsd" type="password" name="repassword"><br>
    </p>
    <p>
        <label for="email">邮箱:</label><em>*</em>
        <input id="email" type="text" name="email"><br>
    </p>
    <p>
    <input class="submit" type="submit" value="提交">
    </p>
</form>
</body>
</html>

③留言板评论示例2：同样需要从数据库中取数据，实现两个功能，一是展示数据库已有的数据，二是可以添加评论留言

<!DOCTYPE html>
<html lang="en">
<head>
    <title>留言板</title>
    <meta charset="UTF-8">
    <style>
        div {
            margin: 0;
            padding: 0;
            font-size: 12px;
            margin: 0 auto;
        }

        h3 {
            text-align: center
        }

        #container {
            width: 500px;
        }

        .article {
            border: 1px solid #a6cbe7;
            margin-top: 5px;
        }

        .author {
            background-color: #0099FF;
            width: 100%;
            height: 24px;
            line-height: 24px;
        }

        .content {
            height: 40px;
            padding: 10px;
        }

        .author span {
            float: right;
            padding-right: 10px;
        }

        .time {
            border-top: solid 1px #a6cbe7;
        }

        .page {
            text-align: right;
            height: 30px;
            line-height: 30px;
            padding-right: 10px;
        }
    </style>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="js/jquery.validate.regex.js"></script>
    <script>
        //显示已有的留言板内容
        $(function () {
            var $model = $(".article");
            $.ajax({
                url: "http://localhost:8080/gotten",
                type: "post",
                dataType: "json",
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        var $temp = $model.clone(true);
                        $temp.children().eq(0).html("用户：" + data[i].author + "<span>" + data[i].id + "#</span>")
                        $temp.children().eq(1).html(data[i].msg);
                        $temp.children().eq(2).html("发表于：" + data[i].date);
                        $("#container").children().eq(1).before($temp);
                    }
                }
            })
            $model = $(".article").detach();
        })
    </script>
    <script>
        $(function () {
            $("#inputForm").validate({
                rules: {
                    author: {
                        required: true,
                        regex: /^\w{4,20}$/,
                    },
                    message: {
                        required: true,
                        regex: /^\w{4,200}$/
                    }
                },
                messages: {
                    author: {
                        required: "用户名必填！",
                        regex: "格式不符合要求！",
                    },
                    message: {
                        required: "留言内容必填！",
                        regex: "格式不符合要求！"
                    }
                }, //通过验证后运行的函数
                submitHandler: function () {
                    $.ajax({
                        url: "http://localhost:8080/insert",
                        type: "post",
                        dataType: "text",
                        data: {
                            'author': $("input[name='author']").val(),
                            'msg': $("textarea[name = 'message']").val()
                        },
                        success: function (data) {
                            if (data == "true") {
                                alert("留言成功！");
                                window.location.reload(); //刷新当前页面
                            }
                        }
                    })
                }
            })
        })
    </script>
</head>

<body>
<div id="container">
    <div><h3>留言板</h3></div>
    <div>
        <div class="article">
            <div class="author"><span></span></div>
            <div class="content"></div>
            <div class="time page"></div>
        </div>
    </div>

    <div class="page">
        <input class="btn1" type="button" value="上一页" onClick="">
        <input class="btn1" type="button" value="下一页" onClick="">
    </div>
    <br>
    <div>
        <form id="inputForm" action="doPost.jsp" method="post">
            <div>
                用户: <input type="text" name="author" value=""/>
            </div>
            <br>
            <div>
                留言: <textarea name="message" rows="5" cols="72"></textarea>
            </div>
            <div align="center"><input type="reset" value="清除"/> <input type="submit" value="发表"/></div>
        </form>
    </div>
</div>
</body>
</html>

总结：两个案例，一个是登录功能：进行表单验证与ajax提交；一个是留言板评论功能。以此给大家参考下表单验证与ajax的结构与用法，也顺便整理下自己所学的知识。谢谢大家