上一篇博客介绍了注册登录时一次性图形验证码的工具类的编写,这篇随笔同样是我在写用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. 丰富“WinForms” 的一个别样"项目"（学生管理）

    一个别样的WinForms项目,他并没多么的新颖,但是它的用处确实有点多,或许会有你需要的地方:如果你对WinForms中那么多控件无法把握,又或者是你根本就不懂,那我觉得你应该好好看看,如果一个人的 ...

  2. jQuery的几种简单实用效果

    许久未分享博客,或许已生疏. 闲来无事, 分享几个jQuery简单实用的效果案例 不喜勿喷... 1.页面常用的返回顶部 <!DOCTYPE html> <html lang=&qu ...

  3. 提取bmp图片的颜色信息，可直接framebuffer显示（c版本与python版本）

    稍微了解了下linux的framebuffer,这是一种很简单的显示接口,直接写入像素信息即可 配置好的内核,会有/dev/fbn 的接口,于是想能否提前生成一个文件,比如logo.fb,里面仅包含像 ...

  4. Js中变量的作用域

    一.理解函数作用域需要理解以下几点:    1.函数变量的作用域有全局变量和局部变量两种,全局变量写在函数的最前面,局部变量写在函数体内,局部变量省略了var 也就默认成为了全局变量!    2.函数 ...

  5. Node.js 框架

    Node.js的是一个JavaScript平台,它允许你建立大型的Web应用程序.  Node.js的框架平台使用JavaScript作为它的脚本语言来构建可伸缩的应用. 当涉及到Web应用程序的开发 ...

  6. Java实现列出目录下所有文件和文件夹

    package com.filetest; import java.io.File; import java.util.Scanner; public class fileview { public ...

  7. 避免Castle Windsor引起的内存泄露

    原文地址: http://nexussharp.wordpress.com/2012/04/21/castle-windsor-avoid-memory-leaks-by-learning-the-u ...

  8. Hybrid App移动应用开发初探

    一.移动App类型及其优缺点 1.1 Native App Native App(原生App)是用原生语言(Object-C/Java/C#/....)开发,用户需要下载安装的手机应用. 优点是 可以 ...

  9. [.net 面向对象程序设计深入]（6）.NET MVC 6 —— 模型、视图、控制器、路由等的基本操作

    [.net 面向对象程序设计深入](6).NET MVC 6 —— 模型.视图.控制器.路由等的基本操作 1. 使用Visual Studio 2015创建Web App (1)文件>新建> ...

  10. 《Entity Framework 6 Recipes》中文翻译系列 (21) -----第四章 ASP.NET MVC中使用实体框架之在页面中创建查询和使用ASP.NET URL路由过虑

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 4.2. 构建一个搜索查询 搜索数据是几乎所有应用的一个基本功能.它一般是动态的,因 ...