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

最新推荐文章于 2021-08-05 12:31:14 发布

Mr__欢先生

最新推荐文章于 2021-08-05 12:31:14 发布

阅读量607

点赞数

分类专栏： Java EE学习文章标签： ajax 表单

本文链接：https://blog.csdn.net/Mr_Huan/article/details/70534043

版权

Java EE学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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

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

Mr__欢先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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
复制链接

扫一扫