ajax简单实例用户名验证

最新推荐文章于 2021-08-06 22:20:13 发布

簆rht

最新推荐文章于 2021-08-06 22:20:13 发布

阅读量329

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/u013223565/article/details/47316821

版权

ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

.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>

簆rht

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax简单实例用户名验证

.java@WebServlet("/aa")public class AaServlet extends HttpServlet {private static final long serialVersionUID = 1L;protected void doPost(HttpServletRequest request, HttpServletResponse res
复制链接

扫一扫

专栏目录