jquery 入门

最新推荐文章于 2024-05-02 13:13:28 发布

zzkk_1980

最新推荐文章于 2024-05-02 13:13:28 发布

阅读量392

点赞数

分类专栏： jquery 文章标签： jquery servlet function myeclipse stylesheet 服务器

本文链接：https://blog.csdn.net/zzkk_1980/article/details/5986751

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jquery 入门验证用户是否存在

jQuery 官方下載
   http://jquery.com/

   jQuery 1.3 API 下载
   http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html

   myeclipse 下新建一个web 项目 jquery

   主要是验证用户是否存在

   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>
  <servlet-name>validate</servlet-name>
  <servlet-class>com.launch.validateUser</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>validate</servlet-name>
  <url-pattern>/validate</url-pattern>
</servlet-mapping>
<welcome-file-list>
  <welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

validate.jsp

<%@ page language="java" import="java.util.*" pageEncoding="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 'validate.jsp' starting page</title>

</head>

<body>
  请输入用户名:
  <input type="text" id="userName" class="userText" />
  <input type="button" value="验证用户是否存在" id="validate" />
  <div id="result"></div>

</body>
</html>

validateUser servlet

package com.launch;

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;

/**
* <b>Title:</b> UserVerify.java<br>
* <b>Description:</b> <br>
* Copyright (c) 2010-2011 Launch Tech Co., Ltd. All rights reserved.
*
* @author zhangkui Nov 4, 2010
* @version V1.0
*/
public class validateUser extends HttpServlet {

/**
*
*/
private static final long serialVersionUID = 1L;

/**
* Processes requests for both HTTP <code>GET</code> and <code>POST</code>
* methods.
*
* @param request servlet request
* @param response servlet response
*/
protected void processRequest(HttpServletRequest request,
   HttpServletResponse response) throws ServletException, IOException {
  response.setContentType("text/html;charset=UTF-8");
  PrintWriter out = response.getWriter();
  try {
   String userName = request.getParameter("userName");
   if (userName == null || userName.length() == 0) {
    out.println("用户名不能为空!");
   } else {
                //為了簡單點，不用訪問數據庫，直接寫個簡單的測試
    if (userName.equals("test")) {
     out.println("用户名[" + userName + "]已经存在，请使用别的用户名注冊");
    } else {
     out.println("可以使用此用户名[" + userName + "]注册");
    }
   }
  } finally {
   out.close();
  }
}

/**
* Handles the HTTP <code>GET</code> method.
*
* @param request servlet request
* @param response servlet response
*/
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}

/**
* Handles the HTTP <code>POST</code> method.
*
* @param request servlet request
* @param response servlet response
*/
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}

}

validateUser.js

/*
* 需要通过Javascript代码来做两件事情
* 1.button被按下的时候，需要将文本框中的数据获取到，然后发送给服务器端，最后接受服务器返回的数据，填充到我们预留的div中，这样用户就可以看到结果
* 2.文本框上，用户按键之后，需要判断文本框中的内容是否为空，如果不为空，红色的边框和背景图就应该取消，否则保留
* */

/*
* 需要在页面装载完成是注册上这些工作
* */
$(document).ready(function() {
//这里面的内容就是页面装载完成后需要执行的代码
var userNameNode = $("#userName");
//需要找到button按扭，注册事件
$("#validate").click(function() {
  //1.获取文本框的内容
  var userName = userNameNode.val();
  //2.将这个内容发送给服务器端
  if (userName == "") {
   alert("用户名不能为空");
  } else {
   $.get("http://localhost:8080/jquery/validate?userName=" + userName,null,function(response){
     //3.接收服务器端返回的数据，填充到div中
     $("#result").html(response);
    });

  }
});
//需要找到文本框，注册事件
userNameNode.keyup(function(){
  //获取当前文本框中的内容
  var value = userNameNode.val();
  if (value == "") {
   //让边框变成红色，并且带背景图
   userNameNode.addClass("userText");
  } else {
   //去掉边框和背景图
   userNameNode.removeClass("userText");

  }
});
});

validateUser.css

.userText {
/*控制文本框的边框是红色的实线*/
border: 1px solid red;
/*上层目录*/
background-image: url(../images/validateUser.gif);
/*背景图像在水平方向上重复*/
background-repeat: repeat-x;
/*背景图片放在底部*/
background-position: bottom;
}

validateUser.gif

最后访问

http://localhost:8080/jquery/validate.jsp

输入用户名查看是否存在，如果是test已经存在

zzkk_1980

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 入门

jquery 入门验证用户是否存在 jQuery 官方下載 http://jquery.com/ jQuery 1.3 API 下载 http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html myeclipse 下新建一个web 项目 jquery 主要是验证用户是否存在 web.xml xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:sche
复制链接

扫一扫