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

今天要讲的是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的结构与用法,也顺便整理下自己所学的知识。谢谢大家

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值