ajax逐步验证表单信息,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.

--%>

注册信息

.top {

margin-left: 800px;

margin-top: 200px;

}

$(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)

});

}

});

});

信息注册

用户名：

邮 箱：

性 别：男生

女生

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.

--%>

Title

$(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("

姓名：" + name + "性别：" + age + "邮箱：" + email);

});

return false;

});

});

Title

学生信息：

• 马小欢
• 赵云
• 小明

用户名存在

用户不存在