上一篇博客介绍了注册登录时一次性图形验证码的工具类的编写,这篇随笔同样是我在写用jquery中ajax实现登录信息检测的异步请求功能的笔记,在各个网站进行信息用户注册时,需要在不刷新页面的情况下对注册信息进行检测并实时返回信息,比如这种情况:

对于不需要访问数据库的页面验证比较简单,一旦需要访问数据库,就比较麻烦一些,好在Jquery可以很方便的使用ajax,我写了一个简单到不能再简单的例子,效果是这样的:

   

下面介绍步骤及代码:

1:jsp页面(重点是jquery函数)如下:

1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

 3

 4 <html>

 5 <head>

 6 <base href="<%=basePath%>">

 7 <script type="text/javascript" src='<c:url value='/jquery-1.5.1.js'/>'></script>

 8 <script type="text/javascript">

 9     $(function() {

10         $("#username").blur(function() {

11             var uname = $("#username").val();

12             $.ajax({

13                 //要请求的服务器url

14                 url : "/jqueryTest/JQueryServlet",

15                 //表示请求参数的对象,参数:val=uname

16                 data : {

17                     val : uname

18                 },

19                 //是否为异步请求

20                 async : true,

21                 //是否缓存结果

22                 cache : false,

23                 //请求方式

24                 type : "POST",

25                 //服务器返回的是什么类型

26                 dataType : "json",

27                 //函数会在服务器执行成功时被调用,参数result就是服务器返回的值

28                 success : function(result) {

29                     /* if (result) {

30                         $("#nameLabel").text("输入正确");

31                     } else {

32                         $("#nameLabel").text("用户名不存在");

33                     } */

34                 $("#nameLabel").text(uname+result.info);

35                 }

36             });

37         });

38     });

39 </script>

40 <style type="text/css">

41 </style>

42 </head>

43

44 <body>

45     用户名 <input type="text" name="name" id="username" />

47     <label id="nameLabel"></label><br>
48　　　密 码:<input type="password" name="pwd" /><br>

51 </body>

52 </html>

新建一个servlet用于处理请求:

 package com.wang.test;

 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 JQueryServlet extends HttpServlet {

     public void doPost(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException {

         response.setContentType("text/html;charset=utf-8");

         response.setCharacterEncoding("utf-8");

         PrintWriter out = response.getWriter();

         String value=request.getParameter("val");

         System.out.println("value:"+value);

         /*if(value.equals("wang")){

             out.print(true);

         }else{

             out.print(false);

         }*/

         if(value.equals("wang")){

             String str="{\"name\":\""+value+"\",\"info\":\"合法\"}";

             out.print(str);

         }else{

             String str="{\"name\":\""+value+"\",\"info\":\"不合法\"}";

             out.print(str);

         }

     }

 }

这里为了简便就没有写访问数据库的诸多代码,如果用书输入"wang",就返回"wang合法",如果输入"somelse",就显示"someelse不合法".

JQuery中使用Ajax实现诸如登录名检测等异步请求Demo的更多相关文章

  1. jquery中的ajax方法参数

    引用来自:http://www.cnblogs.com/tylerdonet/p/3520862.html jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String ...

  2. jQuery入门（4）jQuery中的Ajax应用

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  3. jquery中的ajax参数

    jquery中将ajax封装成了函数,我们使用起来非常方便,jquery会自动根据内容选择post还是get方式提交数据,并且会自动编码,但是要想完全掌握jquery中的ajax,我们必须将它的各个参 ...

  4. jQuery中操作Ajax方法小结

    有时候,越深入去了解一个点,越发觉得自己无知,而之前当自己晓得一两个片面的点还洋洋自得,殊不知,这是多么讽刺 jQery对Ajax操作进行了封装,常见的 ajax()属于最底层的方法,使用频率很高的 ...

  5. $.ajax()方法详解 jquery中的ajax方法

    jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...

  6. jquery中的ajax方法

    $.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...

  7. jQuery系列（十四）：jQuery中的ajax

    1.什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJAX通过后台加载数据,并在 ...

  8. jquery中的ajax方法参数的用法和他的含义

    jquery中的ajax方法参数的用法和他的含义: 1.url:  要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type:  要求为String类型的参数,请求方式(pos ...

  9. 从零开始学习jQuery (六) jquery中的AJAX使用

    本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式. 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即 ...

随机推荐

  1. Java ArrayList和Vector、LinkedList与ArrayList、数组(Array)和列表集合(ArrayList)的区别

    ArrayList和Vector的区别ArrayList与Vector主要从二方面来说.  一.同步性:   Vector是线程安全的,也就是说是同步的,而ArrayList是线程序不安全的,不是同步 ...

  2. *HDU3398 数学

    String Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  3. ZK 样式使用

    控件: <textbox id="usernameTb" sclass="login-user-input" placeholder="账号&q ...

  4. 【转】博弈—SG函数

    转自:http://chensmiles.blog.163.com/blog/static/12146399120104644141326/ http://blog.csdn.net/xiaofeng ...

  5. eayui datagrid 分页 排序 详解

    最近因为经常使用easyui 在做表格时难免后出现排序 及分页的问题,但是 在官网中没有 相关的介绍及例子,所以经过多方面的查找后,终于完成了分页 和排序的功能 首先 页面datagrid 要排序的必 ...

  6. 初识Python

    Python 简介 Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具有 ...

  7. 嵌入式的重要平台 .NET Micro Framework

    曾经辉煌的巨人PC界渐渐走向下坡路,而智能手机圈则没完没了般地争个你死我活.随着智能手机的广泛普及,不少商家为了不坐以待毙而纷纷开始涉足与穿戴式设备--智能手表(具体参见智能手表时代还有多远). 我们 ...

  8. ABP理论学习之工作单元(Unit of Work)

    返回总目录 本篇目录 公共连接和事务管理方法 ABP中的连接和事务管理 仓储类 应用服务 工作单元 工作单元详解 关闭工作单元 非事务的工作单元 工作单元方法调用其它 工作单元作用域 自动保存 IRe ...

  9. Net作业调度(五)—quartz.net动态添加job设计

    介绍 在实际项目使用中quartz.net中,都希望有一个管理界面可以动态添加job,而避免每次都要上线发布. 也看到有园子的同学问过.这里就介绍下实现动态添加job的几种方式, 也是二次开发的核心模 ...

  10. [.net 面向对象程序设计进阶] (25) 团队开发利器（四）分布式版本控制系统Git——使用GitStack+TortoiseGit 图形界面搭建Git环境

    [.net 面向对象程序设计进阶] (25) 团队开发利器(四)分布式版本控制系统Git——使用GitStack+TortoiseGit 图形界面搭建Git环境 本篇导读: 前面介绍了两款代码管理工具 ...