您的位置：首页 > 其它

ajax简单实例用户名验证

2015-08-06 14:54 483 查看

.java

package com.atguigu.ajax.app.servlets;

import java.io.IOException;
import java.util.Arrays;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ValiateUserNameServlet
 */
@WebServlet("/valiateUserName")
public class ValiateUserNameServlet extends HttpServlet {
<span style="white-space:pre">	</span>private static final long serialVersionUID = 1L;

<span style="white-space:pre">	</span>protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
<span style="white-space:pre">		</span>List<String> usernames = Arrays.asList("aa","BB","CC");
<span style="white-space:pre">		</span>String userName = request.getParameter("userName");
<span style="white-space:pre">		</span>String re = null;
<span style="white-space:pre">		</span>if(usernames.contains(userName)){
<span style="white-space:pre">			</span>re = "<font color='red'> wrong! </font>";
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>else{
<span style="white-space:pre">			</span>re = "<font color='green'> success! </font>";
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>response.setCharacterEncoding("UTF-8");
<span style="white-space:pre">		</span>response.setContentType("text/html");
<span style="white-space:pre">		</span>response.getWriter().print(re);
<span style="white-space:pre">	</span>}

}

jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<!--
执行时间不同： $(document).ready在页面框架下载完毕后就执行；而window.onload必须
在页面全部加载完毕（包含图片下载）后才能执行。很明显，前者的执行效率高于后者。
执行数量不同： $(document).ready可以重复写多个，并且每次执行结果不同；而window.
onload尽管可以执行多个，但仅输出最后一个执行结果，无法完成多个结果的输出。
$(document).ready(function(){}) 可以简写成 $(function(){})，因此与下面的代码是等
价的。
-->
<!--
1.导入jquery库
2、获取节点
3.添加响应函数
3.1获取username的value属性值，准备发送ajax请求
3.2发送ajax请求检验username是否可用
3.3在服务器直接返回一个html的片段进行提示
3.4返回信息显示
-->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery.js"></script>

<script type="text/javascript">
$(function() {
$(":input[name='username']").change(function(){
alert("aa");
var val = $(this).val();
val = $.trim(val);
//alert(val);

if(val != ""){
var url = "${pageContext.request.contextPath}/valiateUserName";
var args = {"userName":val,"time":new Date()};
//alert(url);
$.post(url,args,function(data){
$("#message").html(data);
});
}//alert(val);
});
})
</script>
<body>
<form method="post" action="">
usernmae：<input type="text" name="username">
<div id="message">

</div>
<input type="submit" value="onsubmit">
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航