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. nodejs for centos配置

    mongodb http://www.cnblogs.com/zhoulf/archive/2013/01/31/2887439.html nodejs http://zhaohe162.blog.1 ...

  2. Effective Objective-C 2.0之Note.02

    1.多用类型常量,少用#define预处理指令 不要用预处理指令定义常量.这样定义出来的常量不含类型信息,编译器只是会在编译前据此执行查找与替换操作.即使有人重新定义了常量值,编译器也不会产生警告信息 ...

  3. EF - 批量插入

    比较一下下面两种方式的区别 1,每Add一次 就savechange() static void Main(string[] args) { //List<User> users= Fin ...

  4. JAVA事务

    一.什么是事务 我们通常会认为事务与数据库有关. 事务是访问数据库的一个操作序列,数据库应用系统通过事务集来完成对数据库的操作.事务的正确执行使得数据库从一种状态转换成另外一种状态. 事务必须服从IS ...

  5. OpenGl学习笔记3之模型变换、视图变换、投影变换、视口变换介绍

    模型变换.视图变换.投影变换.视口变换介绍 opengl中存在四种变换,分别是模型变换,视图变换,投影变换,视口变换.这四种变换是图形渲染的基本操作,实质上这四种变换都是由矩阵乘法表示(这些操作都是由 ...

  6. 网络笔记02数据解析 -1-JSON解析

    1.JSON解析 1.JSON介绍 JSON是最网络传输数据最为广泛的数据格式,没有之一,出身草根,是Javascript的子集,专门负责描述数据格式.Javascript是网页开发的一种脚本语言,和 ...

  7. UAT测试，PPT测试

    UAT:user acceptable testing 用户验收测试 PPT:product produce test  产品生产验证

  8. xml之XSLT

     1.XSLT是什么  XSLT是XSL的子集,XSL是样式表.XSLT的作用:将XML文档转化成HTML,做的是中间转换者. 而主要需要学习的是XSLT(XSLTransformation).  2 ...

  9. javascript学习小记（一）

    大四了,课少了许多,突然之间就不知道学什么啦.整天在宿舍混着日子,很想学习就是感觉没有一点头绪,昨天看了电影激战.这种纠结的情绪让我都有点喘不上气啦!一点要找点事情干了,所以决定找个东西开始学习.那就 ...

  10. android 高德地图出现【定位失败key鉴权失败】

    如题:android 高德地图出现[定位失败key鉴权失败] 原因:使用的是debug模式下的SHA1,发布的版本正确获取SHA1的方式见: 方法二使用 keytool(jdk自带工具),按照如下步骤 ...