Ajax小案例:验证表单中用户名是否可用

需求:输入用户名判断是否存在此用户

创建表单index.jsp

<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 17-4-21
  Time: 下午5:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册信息</title>
    <script type='text/javascript' src='../js/jquery.min.js' charset='utf-8'></script>
    <style>
        .top {
            margin-left: 800px;
            margin-top: 200px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $(":input[name='username']").change(function () {
                var name = $(this).val();
                name = $.trim(name);//取出前后空格
                if (name != "") {
                    var url = "/Login_AServlet";
                    var args = {"username": name, "time": new Date()};
                    $.get(url, args, function (data) {
                        $(".message").html(data)
                    });
                }
            });
        });
    </script>
</head>
<body>
<div class="top">
    <h1>信息注册</h1>
    <form action="#" method="post">
        用户名:<input type="text" name="username"><span class="message"> </span><br>
        邮 箱:<input type="text" name="emile"><br>
        性 别:<input type="radio" name="sex" value="男生" checked="checked">男生
        <input type="radio" name="sex" value="女生">女生<br>
        <input type="submit" value="登 录">
    </form>
</div>
</body>
</html>

Login_AServlet.java

<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 17-4-21
  Time: 下午12:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script type='text/javascript' src='./js/jquery.min.js' charset='utf-8'></script>
    <title>Title</title>
    <script type="text/javascript">
        $(function () {
            $("a").click(function () {
                var url = this.href;
                var time = {"time": new Date()}
                $.post(url, time, function (data) {
                    var name = $(data).find("name").text();
                    var age = $(data).find("age").text();
                    var email = $(data).find("email").text();
                    $(".html_").html("");
                    $(".html_").append("<h2>姓名:" + name + "性别:" + age + "邮箱:" + email);
                });
                return false;
            });
        });
    </script>
    <title>Title</title>
</head>
<body>
<h1>学生信息:</h1>
<ul>
    <li><a href="./xml_ajax/huan.xml">马小欢</a></li>
    <li><a href="./xml_ajax/yun.xml">赵云</a></li>
    <li><a href="./xml_ajax/ming.xml">小明</a></li>
</ul>
<h1 class="html_"></h1>
</body>
</html>

用户名存在
用户不存在

文章文集:JavaEE--学习笔记

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容