上一篇博客介绍了注册登录时一次性图形验证码的工具类的编写,这篇随笔同样是我在写用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. <十二>JDBC_批量处理

    import java.sql.Connection;import java.sql.PreparedStatement;import org.junit.Test;import com.kk.jdb ...

  2. tomcat context配置

    <Context path="/ext" docBase="/eqp/export" />                访问目录         ...

  3. 在React 组件中使用Echarts

    在完成一个需求的时候碰到一个场景需要使用柱状图.涉及到可视化,第一反应当然是Echarts了.平时用js加载Echarts组件很方便,但是在React中就要费下神了.各种连蒙带猜实现了.edmo里的E ...

  4. 应用程序无法正常启动0xc0150002(windows server 2003)

    windows server 2003运行一个程序时出现 "应用程序无法正常启动0xc0150002"的错误提示; 解决方案: 下载地址:http://www.microsoft. ...

  5. SSE: server-sent events

    当客户端需要定时轮询服务器获取一些消息的时候,可以使用 servser-sent events .NET 服务端: public void ProcessRequest(HttpContext con ...

  6. 公司培训 oracle（ 第一天）

    以前在学校学习Oracle的时候就对rowid 和rownum 这两个伪列有很大的疑惑,今天公司对16届新员工进行公司内部技术培训,课堂上的讲解,又让我想起来了曾经的疑惑点, 我想不能在让这个疑惑继续 ...

  7. qt5.5 qtcreator中文乱码

    MSVC2010默认保存GBK编码.如果不转换成utf-8编码,对GBK编码的文件,中文可以直接用QStringLiteral()宏,如:QMessageBox msgBox;msgBox.setTe ...

  8. ExtJS扩展：扩展grid

    ExtJs的grid功能很强大,但是有时候觉得总是少那么一点点功能,我们就来扩展它,让它用起来更方便. 今天我们要扩展的是:根据记录的选择数量来禁用或启用grid toolbar上的某些按钮. 本文所 ...

  9. Coping with the TCP TIME-WAIT state on busy Linux servers

    Coping with the TCP TIME-WAIT state on busy Linux servers 文章源自于:https://vincent.bernat.im/en/blog/20 ...

  10. 体验 ASP.NET Core 1.1 中预编译 MVC Razor 视图

    这是从 ASP.NET Core 1.1 官方发布博文中学到的一招,可以在 dontet publish 时将 Razor 视图编译为 .dll 文件. 需要在 project.json 中添加如下配 ...