上一篇博客介绍了注册登录时一次性图形验证码的工具类的编写,这篇随笔同样是我在写用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学习【1】

    一.Java 简介 Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java平台的总称. 2005年6月,SUN公司公开Java SE 6.Java ...

  2. Shell下突破安全狗远程桌面守护

    首先在Shell下把安全狗的安装配置给下来 默认安装路径: C:\Program Files\SafedogServer\SafeDogGuardCenter  找到 ProGuardData.ini ...

  3. CSS3 Flexbox不迷路指南

    Flexbox早有耳闻,但是决定切实尝试一番,还是因为看了这条围脖: 我觉得用flexbox可以实现,但是发觉无从下手,属性特性都不了解.趁此机会,学习下. 英文原版参考资料在这里:A Complet ...

  4. 共享文件夹：The user has not been granted the requested logon type at this computer

    场景重现 今天做一个项目测试,要用到虚拟机,于是在虚拟机(XP 32)上新建了一个共享的文件夹.然后我在Win7 机器上访问它得到如下的error 消息:

  5. C#+OpenGL+FreeType显示3D文字(2) - 用GLSL+VBO绘制文字

    C#+OpenGL+FreeType显示3D文字(2) - 用GLSL+VBO绘制文字 +BIT祝威+悄悄在此留下版了个权的信息说: 上一篇得到了字形贴图及其位置字典(可导出为XML).本篇就利用此贴 ...

  6. [ASP.NET MVC 小牛之路]16 - Model 验证

    上一篇博文 [ASP.NET MVC 小牛之路]15 - Model Binding 中讲了MVC在Model Binding过程中如何根据用户提交HTTP请求数据创建Model对象.在实际的项目中, ...

  7. 久违的问候-----eclipse中搭建maven项目2016年

    好久没有写过博客了,可是一直向别人推荐自己的博客,深感惭愧!今天再次在寒冷之夜继续code,config,write. 接下来,我们就来谈下eclipse中搭建maven web工程的步骤!虽然就是一 ...

  8. 在JS中获取文件点之后的后缀字符

    var upFileName = $("#fileToUpload").val();var index1=upFileName.lastIndexOf(".") ...

  9. python 日期计算案例

    一.计算两个日期内的所有月 def get_month_interval(start_str, end_str): start_year, start_month = list(map(int, st ...

  10. LINQ系列：Linq to Object转换操作符

    转换是指将输入对象的类型转变为序列的动作. 1. AsEnumerable AsEnumerable操作符将查询的输入以IEnumberable(T)类型返回. 2. Cast Cast操作符将IEn ...