美文网首页java学习笔记整理学习资源JavaEE 学习专题
Ajax小案例:验证表单中用户名是否可用

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

作者: Mr_欢先生 | 来源:发表于2017-04-21 18:38 被阅读106次
    需求:输入用户名判断是否存在此用户

    创建表单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--学习笔记

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/zaodzttx.html