1、按照下面的工程来建:

2、新建UserVerify.html文件:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jquery实战</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link type="text/css" rel="stylesheet" href="css/UserVerify.css"/>
<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
<script type="text/javascript" src="js/UserVerify.js" ></script>
</head> <body>
<table>
<tr>
<td>
请输入用户名称:
</td>
<td>
<input type="text" id="userName" />
</td>
<td>
<div id="verifyResult"></div>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="button" value="校验" id="verifyButton" /></td>
</tr>
</table>
</body>
</html>

3、新建css/UserVerify.css文件

.nameClass{
/*控制文本框的边框是红色的实线*/
border:1px solid red;
background-image:url(../images/userVerify.gif);
background-repeat:repeat-x;
background-position:bottom;
}

4、新建js/UserVerify.js文件

/*
*需要通过javascript代码来做2件事情:
*1、button被点击的时候,需要将文本框中的数据获取到,然后发送给服务器端,最后接受服务器返回的数据,填充到div中,看到结果;
*2、文本框上,用户按键后,需要判断文本框中的内容是否为空,否,红色的边框和背景图取消,是,则留
*/ /*
*
*/
$(document).ready(function(){ //页面装载完,执行以下代码: //需要找到button按钮,注册事件
$("#verifyButton").click(function(){
//alert("Button click");
//1、获取文本框的内容;
var userName = $("#userName").val();
//2、将这个内容发送给服务器端
if(userName == "")
{
alert("用户姓名不能为空");
}
else
{
//alert(userName);
try
{
$.get("http://localhost:8080/150702JQuery/userVerify?userName="+encodeURI(encodeURI(userName)),null,function(response){
//3、接受服务器端返回的数据,填充到div中
$("#verifyResult").html(response);
});
}
catch(e)
{
alert(e.error);
alert(e.message);
}
} }); //需要找到文本框,注册事件
$("#userName").keyup(function(){
var userName = $(this).val();
if(userName == "")
{
$(this).addClass("nameClass");
}
else
{
$(this).removeClass("nameClass");
}
}); });

5、添加额外的文件:

images/userVerify.gif

以上实现的样式如下图所示:

1)刚打开的样式:

2)输值却为空,则会改变文本框的样式:

6、新建UserVerifyServlet.java类:

package com.jquery.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.net.URLDecoder; import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class UserVerifyServlet extends HttpServlet{ private static final long serialVersionUID = 2348662049635889701L; public void init()
{
System.out.println("init UserVerifyServlet");
}
public void service(HttpServletRequest request,HttpServletResponse response)
{
String userName = (String)request.getParameter("userName"); try
{
userName = URLDecoder.decode(userName,"UTF-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println("用户姓名【"+userName+"】可以注册");
}
catch (UnsupportedEncodingException e1)
{
e1.printStackTrace();
}
catch (IOException e)
{
e.printStackTrace();
} } }

7、在web.xml文件里增加:

<servlet>
<servlet-name>userVerify</servlet-name>
<servlet-class>com.jquery.servlet.UserVerifyServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet> <servlet-mapping>
<servlet-name>userVerify</servlet-name>
<url-pattern>/userVerify</url-pattern>
</servlet-mapping>

增加servlet类后,实现:

输入值后,点击校验按钮,通过ajax访问服务器端,返回数据页面div里展示:

JQuery的第一天实战学习的更多相关文章

  1. jqueryMobile应用第一课《构建跨平台APP:jQuery Mobile移动应用实战》连载一(Hello World)

    有人说每个程序员都曾经有过改变世界的梦想,笔者认为,这与程序员年轻时编写的第一个程序有着莫大的关系.简简单单的一句“hello world”让年轻的心开始相信梦想,用一种低调的壮志凌云向世界展示自己的 ...

  2. jquery Mobile应用第2课《构建跨平台APP:jQuery Mobile移动应用实战》连载二(简单的QWER键盘)

    在jQuery Mobile的布局中,控件大多都是单独占据页面中的一行,按钮自然也不例外,但是仍然有一些方法能够让多个按钮组成一行,比如说在范例6-5中就利用按钮分组的方法使4个按钮并列在一行中,如图 ...

  3. Docker虚拟化实战学习——基础篇(转)

    Docker虚拟化实战学习——基础篇 2018年05月26日 02:17:24 北纬34度停留 阅读数:773更多 个人分类: Docker   Docker虚拟化实战和企业案例演练 深入剖析虚拟化技 ...

  4. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  5. GitHub标星8k,字节跳动高工熬夜半月整理的“组件化实战学习手册”,全是精髓!

    前言 什么是组件化? 最初的目的是代码重用,功能相对单一或者独立.在整个系统的代码层次上位于最底层,被其他代码所依赖,所以说组件化是纵向分层. 为什么要使用组件化? 当我们的项目越做越大的时候,有时间 ...

  6. 【原创】小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载五(给按钮加图标)

    在范例5-4所使用的导航栏中,已经为按钮加入了图标的样式,但是当时并没有介绍按钮的图标究竟是怎么一回事.下面截取范例5-4中导航栏部分的代码: <divdata-role="foote ...

  7. 小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载四(场景切换)

    作为一款真正有使用价值的应用,首先应该至少有两个页面,通过页面的切换来实现更多的交互.比如手机人人网,打开以后先是进入登录页面,登录后会有新鲜事,然后拉开左边的面板,能看到相册.悄悄话.应用之类的其他 ...

  8. 白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》串行4(场景变化)

    作为一个真正的利用价格值应用,首先,你应该至少有两页,通过切换页面来实现很多其他互动.比如手机人人网,首先,打开后进入登录页面,将有登录后,新的东西.然后拉左侧面板.你可以看到相册.私人信息.像其他应 ...

  9. 一个比较全面 的web项目实战学习

    一个比较全面 的web项目实战学习:http://www.cnblogs.com/jikey/p/3613082.html

随机推荐

  1. 自学asp.net mvc(三)

    1.将前台框架的登录页面代码,复制到Login.cshtml. 2.将文本框替换. 3.缓存机制. 4.类图

  2. [转]编译错误: /bin/sh: 1: pushd: not found的问题

    [转]编译错误: /bin/sh: 1: pushd: not found的问题 http://blog.csdn.net/ojinxi/article/details/12186839 ubuntu ...

  3. Oracle之sql追踪

    select * from v$sqlarea t where t.sql_text like '%_070%' order by t.LAST_ACTIVE_TIME desc SELECT * F ...

  4. Android编程: fragment组件、菜单和Intent组件

    学习内容:fragment组件.菜单和Intent组件 ====fragment组件====1.fragment是一种自我容纳,模块化的,嵌入在一个Activity里面的视图组件    可以在运行时动 ...

  5. 【BZOJ 2120】 数颜色

    Description 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同颜 ...

  6. ORA-12154:TNS:无法解析指定的连接标识符

    ORA-12154:TNS:无法解析指定的连接标识符 1问题的描述 Oracle11g server 64bit服务器端安装在Windows Server2008 Enterprise上,安装Orac ...

  7. js之基本包装类型

    为了便于操作“基本类型值”,JS 提供了 三个 特殊的引用类型:Boolean.Number.String.这些类型和其他引用类型相似,但同时 也具备 与各自基本类型相应的特殊行为. 实际上:每当读取 ...

  8. 使用getElementById获取xml中的指定元素

    Document有一个getElementById的方法,在文档中的解释是:     返回具有带给定值的 ID 属性的 Element.如果不存在此类元素,则此方法返回 null.如果多个元素具有带该 ...

  9. yii的常用配置文件

    <?php return array( 'basePath' => dirname(__FILE__).DIRECTORY_SEPARATOR.'..', //当前应用根目录路径 'nam ...

  10. ZOJ 3941 Kpop Music Party 贪心

    题目链接: http://www.icpc.moe/onlinejudge/showProblem.do?problemCode=3941 题解: 先吧所给的区间合并,得到若干个独立的区间. 然后从左 ...