使用JQuery和JavaScript实现的一个用户名验证

最新推荐文章于 2021-08-05 21:58:58 发布

iteye_9841

最新推荐文章于 2021-08-05 21:58:58 发布

阅读量129

点赞数

分类专栏： Ajax 文章标签： jQuery JavaScript Servlet Ajax JSP ViewUI

本文链接：https://blog.csdn.net/iteye_9841/article/details/81969513

版权

Ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

第一个Ajax程序：楼主在此声名此博客仅当自己的参考手册和学习历程的见证。写得不好或有什么问题请进入博客的朋友们提宝贵意见，同时对于楼主博客不屑一顾的朋友们也不要乱加评断，你可以选择浮云就当没看见。谢谢——

1.前台页面：

<%@ page language="java"  pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/verify.js"></script>
	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  </head>
  <body>
  	<h3>用户名输入校验的例子</h3>
  	<input name="username" type="text" id="username"><br>
  	<input type="button" value="检验" οnclick="verify()">
  	<div id="result"></div>
  </body>
</html>

2.导入js文件和jquery库：

1>jQuert库在网上可以找到不多作介绍。

function verify(){

	//1.获取文本框中的内容
		//document.getElementById("username");dom的方式
		//Jquery的查找节点的方式，参数上#加上属性值可以找到一个节点
		//jQuery的方法返回的都是jQuery的对象，可以继续在上面执行其他的jQuery方法
		var jQueryObj = $('#username');
		//获取节点的值
		var userName = jQueryObj.val();
		//alert(userName);
	//2.将文本框的数据发送给服务器的Servlet
		//使用jQuery的XMLHTTPrequest对象get请求的封装
		$.get("servlet/AJAXServer?name="+userName,null,callback);
}

//回调函数
function callback(data){
	document.charset="UTF-8";
	//3.接受服务器返回的数据
		//alert("服务器段的数据回来了"+data);
	//4.将服务器返回的数据动态的显示在页面上
		//找到保存结果信息的节点<div id=result>
		var resultObj = $('#result');
		//动态的改变页面的div节点中的内容
		resultObj.html(data);
}

3.定义Servlet类：

package com.zchen.ajax.servlet;

import java.io.IOException;
import java.io.PrintWriter;

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

public class AJAXServer extends HttpServlet {
	private static final long serialVersionUID = 3611240119854641367L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		try {
			response.setContentType("text/html");
			response.setCharacterEncoding("utf-8");
			PrintWriter out = response.getWriter();
			String old = request.getParameter("name");
			if (old == null || old.length() == 0) {
				out.println("用户名不能为空");
			} else {
				String name = new String(old.getBytes("ISO-8859-1"), "UTF-8");
				if (name.equals("admin")) {
					out.println("用户名[" + name + "]已经存在。");
				} else {
					out.println("用户名[" + name + "]尚未存在。");
					out.println("<br/><a href=\'index.jsp\'>返回校验页面</a>");
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

}

4.配置web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
	xmlns="http://java.sun.com/xml/ns/j2ee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>AJAXServer</servlet-name>
    <servlet-class>com.zchen.ajax.servlet.AJAXServer</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>AJAXServer</servlet-name>
    <url-pattern>/servlet/AJAXServer</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

verify.js简写：

function verify(){

		$.get("servlet/AJAXServer?name="+$('#username').val(),null,function(data){
			$('#result').html(data)
		});
}

iteye_9841

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用JQuery和JavaScript实现的一个用户名验证

第一个Ajax程序：楼主在此声名此博客仅当自己的参考手册和学习历程的见证。写得不好或有什么问题请进入博客的朋友们提宝贵意见，同时对于楼主博客不屑一顾的朋友们也不要乱加评断，你可以选择浮云就当没看见。谢谢—— 1.前台页面：&lt;%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UT...
复制链接

扫一扫