上一篇博客介绍了注册登录时一次性图形验证码的工具类的编写,这篇随笔同样是我在写用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. 解决：No module named pkg_resources

    今天在装bleach的时候,发现bleach依赖的其中的一个库是html5lib,从pypi下载源码包,执行python setup.py install,报错了: 提示我的setuptools版本过 ...

  2. JavaScript鼠标经过图片的放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. apache配置反向代理

    http.conf 去掉前面的#号 LoadModule proxy_module modules/mod_proxy.so LoadModule proxy_http_module modules/ ...

  4. 赵文豪 GDB调试汇编堆栈过程分析

    GDB调试汇编堆栈过程分析 使用gcc - g example.c -o example -m32指令在64位的机器上产生32位汇编,然后使用gdb example指令进入gdb调试器: 使用gdb调 ...

  5. iphone 下滚动条卡顿解决办法

    -webkit-overflow-scrolling:touch; -webkit-text-size-adjust:none;

  6. winform设置文本框宽度 根据文字数量和字体返回宽度

    _LinkLabel.Width = TextRenderer.MeasureText(_LinkLabel.Text, _LinkLabel.Font).Width;

  7. Quartz 2D在ios中的使用简述二：创建画布

    在iOS中使用Quartz画图时,第一步就是要获取画布(图形上下文),然后再画布上做各种操作.先看下CoreGraphics.h这个头文件,就可以知道能够创建多少种上下文类型. #include &l ...

  8. ABP理论学习之数据过滤器

    返回总目录 本篇目录 介绍 预定义过滤器 关闭过滤器 开启过滤器 设置过滤器参数 定义自定义过滤器 其他ORM 介绍 软删除模式通常用于不会真正从数据库删除一个实体而是仅仅将它标记为"已删除 ...

  9. ABP理论学习之审计日志

    返回总目录 本篇目录 介绍 配置 通过特性开启/关闭 注意 我项目中的例子 介绍 维基百科说: "审计跟踪(也叫审计日志)是与安全相关的按照时间顺序的记录,记录集或者记录源,它们提供了活动序 ...

  10. 几种简单的负载均衡算法及其Java代码实现

    什么是负载均衡 负载均衡,英文名称为Load Balance,指由多台服务器以对称的方式组成一个服务器集合,每台服务器都具有等价的地位,都可以单独对外提供服务而无须其他服务器的辅助.通过某种负载分担技 ...